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

Posted 2023-03-05

【中文标题】即使溢出其容器，也要保持元素居中

【英文标题】：Keep element centered even when overflowing its container

【发布时间】：2017-08-07 00:14:50

【问题描述】：

我在下面的 sn-p 中重新创建了我的问题：如果您将其设置为 整页 并拖动以减小窗口的水平尺寸，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" >
  </div>
</header>

我试图不改变 HTML 的结构

---

编辑：我得到的答案是试图将图像而不是其后面的文本居中。我可以看到两者都偏离中心时的混乱。我要重申：我主要关心的是在窗口缩小时保持h1 ('ride' text) 元素居中。

【参考方案1】：

您可以使用此 CSS 重置 .img-wrap 的文本对齐并在其中居中。

.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%);

这是完整的 sn-p：

@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%);

<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" >
  </div>
</header>

【讨论】：

我看到这使图像居中，但我的问题是关于 h1 元素保持居中。很抱歉有任何混淆。

啊，好吧......好吧，你可以对h1做同样的事情 - 请参阅我编辑的答案。

完美。我根据自己的需要对此进行了调整。 +1 用于语法纠正。修正后总是很好。

主要监督是在h1 上尝试position: relative 而不是position: absolute。

好吧，并且无法通过常规文本对齐来进行居中，但需要像我的回答中那样进行“双重重新定位”