如何使用CSS在DIV中垂直居中放置文本？

Question

我在使用CSS的DIV中垂直居中放置文本時遇到麻煩。 我在SO和其他地方都遵循了相關的答案，但似乎無法使其正常工作。 我的簡化方案是

<div class="outer">
    <div class="header-title">
        <span class="header-text">This is the title</span>
   </div>
</div>

和

div.outer {
    position: relative;
    height: 200px;
    border-style: solid;
    border-width:1px;

}

div.header-title {
    position: absolute;
    font-size: 36px;
    height: 100%; /* required */
    color: green;
    border-style: dashed;
    border-width:1px;
}

span.header-text {
    vertical-align: middle;
    border-style: dotted;
    border-width:1px;
}

但結果（在Safari中）使“標題文本” span位於“標題標題” div的頂部：

Answer 1

您的示例顯示了將div垂直居中的一種很好的解決方法：

display: table-cell;
vertical-align: middle;

因此，將其添加到您的div CSS中：

div.header-title {
position: absolute;
font-size: 36px;
height: 100%; /* required */
color: green;
display: table-cell;
vertical-align: middle;
border-style: dashed;
border-width:1px;
}