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与表格单元格一起使用，因此您的文本将在中心垂直对齐。