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

Posted 2023-03-05

【中文标题】垂直对齐表格单元格不适用于绝对位置

【英文标题】：Vertical align table-cell don't work with position absolute

【发布时间】：2012-02-12 09:28:49

【问题描述】：

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;

问题

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

有什么聪明的解决方法吗？

【参考方案1】：

在我添加“位置：绝对”之前，一切都按预期工作。现在它 不能再把我的内容放在中间了？为什么不呢？

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;

【讨论】：

我必须将我的包装 div 设置为 display: table 才能让它工作

tks，对我很有帮助

【参考方案2】：

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

#position: absolute;

在此处找到该 hack：Vertical Centering in CSS

【参考方案3】：

解决办法如下：

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