Центрированный 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?

Answer 1

Я смог исправить это, поместив дополнительный div внутри моего абсолютно позиционированного элемента, предоставив ему display flexbox, а затем 100% высоту и ширину.

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

Вот моя скрипка с реализацией: http://jsfiddle.net/pmvjb/