当使用绝对定位时，居中的CSS flexbox在Firefox上出现了什么问题？

Question

我在使用绝对定位与居中的flexbox元素时遇到了问题，在Firefox浏览器中无法正常工作。

这是链接。 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中使用绝对定位。

- Run

---

这些属性来自于2009年的规范，并正在逐步淘汰，以支持当前的规范。如果您正在使用这些属性，因为您需要支持旧版/移动浏览器，请确保您也提供它们的现代替代品。https://gist.github.com/cimmanon/727c9d558b374d27c5b6 - cimmanon

Gecko渲染引擎中存在一个未解决的bug：Bug 579776。position:absolute会将显示属性从display:-moz-box更改为display:block。 - Matt Coughlin

Answer 1

我通过在我的绝对定位元素内部添加一个额外的 div，给它设置 display:flexbox，然后设置 100% 的高度和宽度来解决了这个问题。

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

这是我的实现示例：My Solution (http://jsfiddle.net/pmvjb/)

- DavidBrear