将文本与div的中心对齐

Question

我有一个大约200px x 40px的div。有时这个块将包含一行文本，有时它将包含两行。在它包含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>

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

Answer 2

虽然它似乎是一个简单的问题，但它在CSS2 AFAK中没有直接的解决方案。 Theme Forrest概述了解决此问题的不同方法。