html - CSS：在相对父级中居中绝对定位文本

Question

如何在流体相对父级中居中绝对定位文本？我试图text-align:center在父元素上使用，但它总是以孩子的左角为中心，而不是元素本身。

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

Answer 1

事情是position:absolute;修改元素的宽度以适应其内容，并将text-align: center;文本居中在元素块的宽度内。所以如果你添加了一个position: absolute;不要忘记增加元素的宽度，否则这个text-align: center;属性将毫无用处。

解决此问题的最佳方法是在 .text 部分添加 awidth: 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 **/
}

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%;
}