CSS: 如何在相对定位的父元素中居中绝对定位的文本

Question

如何在流体相对父元素内使绝对定位的文本居中？我试图在父元素上使用text-align:center，但它总是将子元素的左上角居中，而不是元素本身。 http://jsfiddle.net/sucTG/2/

- vlad

---

为什么你的 .text 类 CSS 中需要 position:absolute;？我刚试着把这行代码删除了，文本仍然正确居中。 - jeanpaul62

因为这些块中会有相关元素，我希望文本不影响它们的定位，只需显示在它们的顶部。 - vlad

将某物置于其他物品之上，您只需要定位，不一定需要绝对定位。 - emerson.marini

Answer 1

事实上，position:absolute;会修改元素的宽度以适应其内容，并且text-align: center;将文本居中显示在元素块的宽度内。因此，如果添加position: absolute;，请不要忘记增加元素的宽度，否则text-align: center;属性将无效。

最好的解决方法是在".text"部分添加width: 100%;和left: 0px;。 http://jsfiddle.net/27van/

- jeanpaul62

---

我不是 CSS 专家，但解释得非常好，我真的很喜欢这个答案，它也帮助我解决了我的问题。 - Abdul Rehman

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

- mCpXZKq3ruqgFXrvvAWRj9cYxk8RLX

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

- Gary Kenyon