Question

当绝对位置与居中的flexbox项目一起使用时，我遇到此问题。它在Firefox中不起作用。

这是link。

HTML

<div>
    <p>Center me!</p>
</div>

CSS

div
{
    width:350px;
    height:100px;
    border:1px solid black;

    position:absolute;
    left:0;
    top:0;

    /* Firefox */
    display:-moz-box;
    display:inline-flex;
    -moz-box-pack:center;
    -moz-box-align:center;

    /* Safari and Chrome */
    display:-webkit-box;
    -webkit-box-orient:horizontal;
    -webkit-box-pack:center;
    -webkit-box-align:center;

    /* W3C */
    display:box;
    box-orient:horizontal;
    box-pack:center;
    box-align:center;
}

我知道如何解决这个问题，因为我需要在div中使用绝对位置？

Answer 1

我能够通过在我绝对定位的元素中添加一个额外的div来解决这个问题，让它显示flexbox，然后是100％的高度和宽度。

<div class='container'>
<div>Centered Text here</div>
</div>

这是我实施的一个小提琴：My Solution (http://jsfiddle.net/pmvjb/)

中心CSS flexbox - 使用位置绝对时的Firefox错误？

1 个答案: