3

当绝对位置与居中的弹性框项目一起使用时，我遇到了这个问题。它在 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 中使用绝对位置？

4

1 回答 1

0

我可以通过在绝对定位的元素中放置一个额外的 div 来解决这个问题，让它显示 flexbox，然后是 100% 的高度和宽度。

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

这是我的实现的一个小提琴：我的解决方案（http://jsfiddle.net/pmvjb/）

于 2013-05-22T20:33:11.347 回答