Html 即使溢出其容器，也要使元素居中

我在下面的代码片段中重新创建了我的问题：如果将其设置为整页并拖动以减小窗口的水平大小，

h1

元素在超出其容器边界时不会居中

这是一个视觉：

请注意，在超出容器边界后，它将保持左对齐。 我希望它保持居中。有一个简单的CSS修复程序吗

@导入url（'https://necolas.github.io/normalize.css/latest/normalize.css' );
* {
轮廓：1px纯红；
}
html，正文{
溢出：隐藏；
身高：100%；
文本对齐：居中；
}
h1{
保证金：0；
颜色：#F3；
}
.v-cntr{
位置：相对位置；
最高：50%；
转化：translateY（-50%）；
}
.hdg包装{
字体大小：5.5rem；
位置：绝对位置；
最高：48%；
右：0；
底部：0；
左：0；
转换：translateY（-100%）；
z指数：-1；
}

骑

您可以重置

.img wrap

的文本对齐方式，并使用此CSS将图像居中

.img-wrap {
  text-align: initial;
  position: relative;
}
.img-wrap img {
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
}

注释后添加：您可以对

h1

应用相同的原则。因为它的父对象已经完全定位，所以我没有更改它，只是添加了

h1 {
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
}

以下是完整的片段：

@导入url（'https://necolas.github.io/normalize.css/latest/normalize.css');
* {
轮廓：1px纯红；
}
html，
身体{
溢出：隐藏；
身高：100%；
文本对齐：居中；
}
h1{
保证金：0；
填充：0；
颜色：#eee；
位置：绝对位置；
左：50%；
转化：translateX（-50%）；
}
.v-cntr{
位置：相对位置；
最高：50%；
转化：translateY（-50%）；
}
.hdg包装{
颜色：#fff；
不透明度：0.5；
字体大小：5.5rem；
位置：绝对位置；
最高：48%；
右：0；
底部：0；
左：0；
转换：translateY（-100%）；
z指数：-1；
}
.img包装{
文本对齐：首字母；
位置：相对位置；
}
.img包裹img{
位置：绝对位置；
左：50%；
转化：translateX（-50%）；
}

骑

我看到这张图片居中，但我的问题是关于保持居中的

h1

元素。很抱歉给你添麻烦了。啊，好吧。。。好吧，你也可以用

h1

-看我编辑的答案。完美。我根据自己的需要做了调整+1.语法改正。当它被纠正时总是很好。主要的疏忽是尝试在

h1

上的

position:relative

而不是

position:absolute

。好吧，并且中心不能用常规文本对齐来完成，但是需要像我的回答中那样的“双重重新定位”