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

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

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

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

演示：JSFiddle

Answer 2

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 3

使用 transform 您可以轻松地在水平和垂直方向上实现这一点。

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

DEMO

很好的文章，有很多场景。 https://css-tricks.com/centering-css-complete-guide/

Answer 4

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

在-https://css-tricks.com/quick-css-trick-how-to-center-an-object-exactly-in-the-center/中阅读有关这些技巧的更多信息片段

.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 class="position--relative">
  <div class="position--absolute">
    <h1>POSITION THIS TEXT CENTRALLY INSIDE THE CONTAINER</h1>
  </div>
</div>

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

Position text vertically central inside absolutely positioned div without using pixel units

html

css

css-position

viewport