CSS:将绝对定位文本居中于相对父级

Question

如何将绝对定位文本居中于流体相对父级？我正在尝试使用text-align:center父元素,但它总是将孩子的左角放在中心,而不是元素本身.

http://jsfiddle.net/sucTG/2/

Answer 1

问题是position:absolute;修改元素的宽度以适应其内容,并使text-align: center;文本在元素块的宽度内居中.所以如果你添加一个position: absolute;不要忘记增加元素的宽度,否则text-align: center;属性将是无用的.

解决此问题的最佳方法是在.text部分中添加a width: 100%;和a left: 0px;.

http://jsfiddle.net/27van/

Answer 2

您现在可以使用 flex 更优雅地实现您想要的。见例如：

HTML：

<div class="container">
  <div class="text">Your text</div>
</div>

CSS：

.container {
  position: relative; 
  width: 400px; /** optional **/
  height: 400px; /** optional **/
  background-color: red; /** optional **/
}

.text {
  position: absolute;
  top: 0;
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center; /** Y-axis align **/
  justify-content: center; /** X-axis align **/
}