`vertical-align：middle`并没有达到我的预期

Question

如果我在应用中的表格单元格中，则使用CSS规则vertical-align: middle; 到该单元格，则所有文本在该单元格中垂直居中。

<table>
    <tr>
        <td style="vertical-align: middle;">
            I am vertically centered text!
        </td>
    </tr>
</table>

但是，如果我将此内容应用于其他元素，则其功能有所不同或根本没有。 例如：

<div style="width: 300px; height: 400px; vertical-align: middle;">
    I am not vertically centered, but I wish I was :(
</div>

但是，如果我将其应用于图像标签，则它将调整图像与其他内联元素的方向。

这是一个包含所有这些场景的示例的jsfiddle。

我的问题是，如何在一个简单的DIV中完成垂直中心对齐，就像它在表格单元格中的行为一样？

Answer 1

添加display: table-cell到您的div。

jsFiddle： http : //jsfiddle.net/7FYBa/20/

<div class="outer" style="position:absolute;">
    <div class="inner" style="display:table-cell; vertical-align:middle;">
        I am not vertically centered, but I wish I was :(
    </div>
</div>

Answer 2

但是当然。 垂直居中在CSS中非常时髦。

我建议您阅读一些垂直居中技术。 不同的元素和考虑因素等同于不同的方法。 这是我建议的一篇文章 。

Answer 3

您可以使用jQuery http://jsfiddle.net/7FYBa/30/

Answer 4

当您增加line-height时， vertical-align适用于none-table元素。

#elem {
    vertical-align: middle;
    line-height: 100px;
}

但是当然，使用line-height布局并不是那么容易。