Css 垂直居中文本

如何在普通的

中垂直居中放置一些简单文本？我有这样的标记：

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

关于

它在Firefox或Internet Explorer下都不工作。为什么不呢？

您可能想要

线条高度：

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


关于

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

CSS:

HTML:


例子
它在Chrome下也不工作。因为这不是垂直对齐的工作方式。在这种情况下，可能的副本也可以使用相对或绝对定位。实际上，如果绝对定位的元素位于相对定位的元素内，例如使用top:50%，则元素将不会完全居中，因为无法减去元素自身的高度。对于动态垂直居中，您需要负填充或边距。
top:50%；页边空白顶部：-（半高）
，实际上。好吧，我会被诅咒的：另外，谢谢你发现我使用了全元素高度！
#outer {
    background: grey;
    height: 200px; /* any height */
}

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

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

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