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>

Answer 2

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

我建议你阅读一些垂直居中技术。不同的元素和考虑因素等同于不同的方法。 Here's an article I'd suggest

Answer 3

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

尝试这样的事情

Answer 4

当你增加vertical-align时，

line-height适用于none-table-elements。

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

但当然使用line-height布局并不容易。

`vertical-align：middle`不符合我的预期

4 个答案: