Question

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

一切都按预期工作，直到我添加“position：absolute”。现在它不能再将我的内容放在中间了？为什么不呢？

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;
}

Answer 2

我为此发现了一些解决方法，例如在位置之前添加哈希：

#position: absolute;

在这里发现了这个黑客：Vertical Centering in CSS

Answer 3

这是解决方案：

<div style="position: absolute; /*your position*/">
    <div class="table-cell">
        My text, should be align middle
    </div>
</div>

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

3 个答案: