javascript - `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>

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

Here is a jsfiddle with examples of all these scenarios.

我的问题是，如何在简单的 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>