即使在容器溢出时也要保持元素居中

Question

我在下面的代码段中重新创建了我的问题：如果您将其设为整页并拖动以减小窗口的水平尺寸，则h1元素在超过时不会保持居中它的容器的边界。

这是一个视觉效果：

请注意，超过其容器范围后，它将保持左对齐状态。 我希望它保持中心。有简单的CSS修复吗？

@import url( 'https://necolas.github.io/normalize.css/latest/normalize.css' );
* {
  outline: 1px solid red;
}
html, body {
  overflow: hidden;
  height: 100%;
  text-align: center;
}
h1 {
  margin: 0;
  color: #f3f3f3;
}
.v-cntr {
  position: relative;
  top: 50%;
  transform: translateY( -50% );
}
.hdg-wrap {
  font-size: 5.5rem;
  position: absolute;
  top: 48%;
  right: 0;
  bottom: 0;
  left: 0;
  transform: translateY( -100% );
  z-index: -1;
}

<header class="v-cntr">              <!-- << v-cntr = vertically center -->

  <!-- ----------------------- HEADING WRAPPER ------------------------ -->
  <div class="hdg-wrap">
    <h1>RIDE</h1>
  </div>

  <!-- ------------------------ IMAGE WRAPPER ------------------------- -->
  <div class="img-wrap">
    <img src="http://svgshare.com/i/xL.svg" alt="Logo">
  </div>
</header>

我正在尝试不改变HTML的结构

编辑：我正在尝试将图片居中，而不是背后的文字。我可以看到混乱，因为两个偏离中心。我将重申：我主要担心的是将h1（'ride'文本）元素保持在窗口中心，因为它会缩小。

Answer 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%);
}

这是完整的代码段：

＆＃13;

＆＃13;

@import url('https://necolas.github.io/normalize.css/latest/normalize.css');
* {
  outline: 1px solid red;
}

html,
body {
  overflow: hidden;
  height: 100%;
  text-align: center;
}

h1 {
  margin: 0;
  padding: 0;
  color: #eee;
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
}

.v-cntr {
  position: relative;
  top: 50%;
  transform: translateY( -50%);
}

.hdg-wrap {
  color: #fff;
  opacity: 0.5;
  font-size: 5.5rem;
  position: absolute;
  top: 48%;
  right: 0;
  bottom: 0;
  left: 0;
  transform: translateY( -100%);
  z-index: -1;
}

.img-wrap {
  text-align: initial;
  position: relative;
}

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

＆＃13;

<header class="v-cntr">
  <!-- << v-cntr = vertically center -->

  <!-- -- - - - - - - - - - - - - - HEADING - - - - - - - - - - - - - - -->
  <div class="hdg-wrap">
    <!-- << hdg-wrap = heading wrapper -->
    <h1>RIDE</h1>
  </div>

  <!-- -- - - - - - - - - - - - IMAGE WRAPPER - - - - - - - - - - - - - -->
  <div class="img-wrap">
    <img src="http://svgshare.com/i/xL.svg" alt="Logo">
  </div>
</header>

＆＃13;

＆＃13;

＆＃13;