CSS：将绝对定位文本置于相对父级内部

Question

如何将绝对定位的文本置于流体相对父级的中心？我尝试在父元素上使用

text-align:center

，但它始终以子元素的左角为中心，而不是元素本身。

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

Answer 1

问题是

position:absolute;

修改元素的宽度以适应其内容，并且

text-align: center;

将文本置于元素块的宽度内居中。因此，如果添加

position: absolute;

不要忘记增加元素的宽度，否则

text-align: center;

属性将毫无用处。

解决此问题的最佳方法是在 .text 部分添加

width: 100%;

和

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 **/
}

Answer 3

更新：我之前放的内容不好/错误

http://jsfiddle.net/brJky/1/

这应该更接近你想要的？

您的文本是相对的，容器内的其他元素是绝对的！

.text {
    color:#fff;
    padding:50px 0;
    display:block;
    position:relative;
}

.absolute {
    background:#f0f;
    height:25px; width:25px;
    position:absolute;
    top:36px; left:50%;
}

Answer 4

太棒了！这对于初学者弄清楚事情非常有用。