css - 垂直对齐表格单元格不适用于绝对位置

Question

http://jsfiddle.net/fQv97/

HTML

<div class="table-cell">
    My text, should be align middle
</div>

CSS

.table-cell {
    height: 200px;
    width: 200px;
    vertical-align: middle;
    background: #eee;
    display: table-cell;
    position: absolute;
}

问题

文本应该放在我的“表格单元格”的中间。在我添加“position:absolute”之前，一切都按预期进行。现在它不能再把我的内容放在中间了吗？为什么不？它仍然知道我的高度和宽度，因为我在 CSS 中设置了它。

对此有什么巧妙的解决方法吗？

Answer 1

Everything works as expected until I add "position: absolute". Now it can't place my content in the middle any more? Why not?

position: absolute 强制 display: block，读取第二个 here .

至于解决方法，我认为您必须将其包装在另一个元素中:

<div class="table-cell-wrapper">
    <div class="table-cell">
        My text, should be align middle
    </div>
</div>

.table-cell-wrapper {
    position: absolute;
}
.table-cell {
    height: 200px;
    width: 200px;
    vertical-align: middle;
    background: #eee;
    display: table-cell;
}