CSS：如何在div中垂直居中對齊文本？ （或任何其他非表格的元素）

Question

要在表格單元格中垂直居中對齊文本，我在td vertical-align: middle使用vertical-align: middle 。

但上面的內容不適用於div，spans，header和其他非table元素。 那么如何在這些元素中垂直居中對齊文本呢？

Answer 1

如果它是單行文本，則可以將行高設置為與元素相同的高度。

Answer 2

有許多可能性，每個都有它的優點和缺點。

這是道格拉斯·赫瑞特（Douglas Heriot）解釋其他5種方法的一篇好文章 ，並對它們進行了比較

Answer 3

只需使用以下樣式：

<style type="text/css">
    div {
            vertical-align: middle;
            display: table-cell;
        }
</style>

這樣，您將div “顯示”為表格單元格，並且由於vertical-align與表格單元格一起使用，因此您的文本將在中心垂直對齊。