Question

我正在寻找一种方法将<h1>标签放置在绝对定位的容器div内垂直居中。我知道display: table和display: table-cell，但这对绝对定位并不适用。

<div class="position--relative">
    <div class="position--absolute">
        <h1>POSITION THIS TEXT CENTRALLY INSIDE THE CONTAINER</h1>
    </div>
</div>

有没有办法可以在没有使用px单位的情况下集中定位此文本？这是因为它需要保持在各种视口的中心位置。

Answer 1

display: table和display: table-cell

出了什么问题

试试这个：

* {
  margin: 0;
  padding: 0;
}
html,
body {
  width: 100%;
  height: 100%;
}
.position--relative {
  position: relative;
  width: 100%;
  height: 100%;
}
.position--absolute {
  position: absolute;
  width: 100%;
  height: 100%;
}
.table {
  display: table;
  width: 100%;
  height: 100%;
}
.cell {
  display: table-cell;
  text-align: center;
  vertical-align: middle;
}

<div class="position--relative">
  <div class="position--absolute">
    <div class='table'>
      <div class='cell'>
        <h1>POSITION THIS TEXT CENTRALLY INSIDE THE CONTAINER</h1>
      </div>
    </div>
  </div>
</div>

Fiddle here

Answer 2

将元素从顶部移动50％，然后使用变换将其向上移动一半大小：

h1 {
  margin: 0;
  position: relative;
  transform: translateY(-50%);
  top: 50%;
}

演示：JSFiddle

Answer 3

使用transform，您可以轻松地在水平和垂直方向实现此目的。

 .position--absolute
 {
   position:absolute;  
   top:50%;
   left:50%;
   transform: translate(-50%,-50%);
}

documentation

很多文章都提供了很好的文章。 DEMO

Answer 4

如果您不想将table和table-cell :) top和left设置为50%，请转到此处。 translate的{{1}}值基于元素的大小，因此可以很好地居中。

详细了解这些技巧 - https://css-tricks.com/quick-css-trick-how-to-center-an-object-exactly-in-the-center/ 的段

transform

.position--relative { position: relative; height: 250px; background: #333; } .position--absolute { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); width: 100%; text-align: center; } h1 { color: #fff; }

将文本垂直放置在绝对定位的div内，而不使用像素单位

4 个答案: