Question

我有一个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>

Answer 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>

使绝对div占据父级的100％高度

1 个答案: