垂直居中文本

Question

我该如何在普通的<div>中垂直居中一些简单文本？我的标记如下：

<div style="height:200px;">
   <span style="display:inline; vertical-align:middle;">ABOUT</span>
<div>

它在Firefox和Internet Explorer下都无法工作。为什么呢？

- Jacek

---

它在Chrome下也不起作用。因为这不是vertical-align的工作方式。 - Roddy of the Frozen Peas

可能是如何使用CSS将文本垂直居中对齐在div中？的重复问题。 - user

Answer 1

这不是vertical-align的作用。你可能需要使用line-height：

<div>
    <span style="line-height: 200px;">ABOUT</span>
</div>

这里是一个演示。

- Ry-

Answer 2

我发现使用间距元素是居中任何已知高度元素（图像、文本）最可靠的方法。这将在任何高度的容器中居中一个元素。

CSS：

#outer {
    background: grey;
    height: 200px; /* any height */
}

#outer > div {
    height: 50%;
    margin-bottom: -6px;
}

#outer span {
    font-size: 12px;
}

HTML：

<div id="outer">
    <div></div>
    <span>Example</span>
</div>

- MaxPRafferty

---

在这种情况下，最好使用相对或绝对定位。 - Ry-

实际上，当一个绝对定位的元素在相对定位的元素内部时，使用 top:50% 等属性并不能使你的元素完美居中，因为你无法减去元素本身的高度。要实现动态垂直居中，你需要使用负的 padding 或 margin。 - MaxPRafferty

实际上，这段代码是 top: 50%; margin-top: -(高度的一半)。 - Ry-

哎呀，我真是太蠢了：http://jsfiddle.net/MaxPRafferty/2VHBZ/13/ 还有，谢谢你指出我使用了完整元素高度！ - MaxPRafferty