使绝对 div 占据父级的 100% 高度答案

【问题标题】：Make absolute div take 100% height of parent使绝对 div 占据父级的 100% 高度
【发布时间】：2019-07-27 23:19:54
【问题描述】：

我有一个 div，其大小取决于其内容。我想要一个绝对的孩子，占据整个空间。

在 Firefox 中我得到了想要的结果，但在 Chromium 中却没有。如何解决？

哪个浏览器违反规范呈现？

<div style="position:relative;float:left;">
    <div style="position:absolute;display:table;left:0;top:0;height:100%;width:100%;background:red;">
        <div style="display:table-cell;vertical-align:middle;">TEST</div>
    </div>

    <!-- this is an img in real with unknown size -->
    <div style="width:200px;height:200px;background:yellow"></div>
</div>

【问题讨论】：

display:table 是罪魁祸首，删除它并使用另一种方式将元素居中 (stackoverflow.com/a/22218694/8620333)
但是为什么要删除它呢？它应该是有效的。
您使用的是使元素居中，这不是最好的方法，它更像是一种 hacky 方式，并且您注意到它在所有浏览器中都无法正常工作。

标签： html css cross-browser

【解决方案1】：

你只需要把这个div的display改成display:flex，然后用margin: auto把文本居中：

<div style="position:relative;float:left">
    <div style="position:absolute;display:flex;left:0;top:0;height:100%;width:100%;background:red;">
        <div style="margin: auto">TEST</div>
    </div>

    <!-- this is an img in real with unknown size -->
    <div style="width:200px;height:200px;background:yellow"></div>
</div>

或者用display: flex和align-items: center：

<div style="position:relative;float:left">
    <div style="position:absolute;display:flex;left:0;top:0;height:100%;width:100%;background:red;align-items: center">
        <div>TEST</div>
    </div>

    <!-- this is an img in real with unknown size -->
    <div style="width:200px;height:200px;background:yellow"></div>
</div>

【讨论】：

文本不再垂直居中。