将文本对齐div的中心

Question

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

相反，我希望单行文本在div内垂直居中显示。设置这个最好的方法是什么？我是否应该将文本放置在次要元素（如<p>）中，然后尝试应用vertical-align: middle？似乎应该有一个更简单，更简化的方法来实现这一点。有任何想法吗？

Answer 1

我不知道它是否工作在任何浏览器（在火狐，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对这个问题的不同方法有很好的概述。