css - CSS：如何垂直居中对齐 div 中的文本？（或任何其他不是表格的元素）

Question

要在表格单元格中垂直居中对齐文本，我vertical-align: middle在td.

但上述不适用于 div、span、header 和其他非表格元素。那么如何在这些元素中垂直居中对齐文本呢？

Answer 1

如果是单行文本，则可以将行高设置为与元素相同的高度。

Answer 2

有很多可能性，每一种都有它的优点和缺点。

这是Douglas Heriot的一篇好文章，解释了其他 5 种方法，并进行了比较。

Answer 3

只需使用以下样式：

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

这样，您将“显示”div为表格单元格，并且由于vertical-align使用表格单元格，您的文本将垂直居中对齐。