html - 将文本对齐到 div 的中心

Question

我有一个大约 200px x 40px 的 div。有时这个 block 将包含一行文本，有时它会包含两行。如果它包含 2 行文本，我调整了行高，使其在 div 内部看起来平衡。但是，在只有一行文本的情况下，文本与 div 的顶部对齐，底部留空。

相反，我希望单行文本在 div 内垂直居中显示。设置它的最佳方法是什么？我应该将文本放在像 <p> 这样的辅助元素中吗？然后尝试申请 vertical-align: middle ？似乎应该有一种更简单、更流线型的方法来实现这一点。有什么想法吗？

Answer 1

我不确定它是否适用于任何浏览器(适用于 Firefox、Chrome、IE8)(不适用于 IE7-)

<div style="display: table-row; height: 180px; width: 500px;">
    <div style="display: table-cell; vertical-align: middle; width: 500px; text-align: center;">Text</div>
</div>

我知道在任何浏览器中绝对有效的唯一解决方案是创建一个表格并在单元格上应用垂直对齐。