居中的CSS flexbox - 使用絕對位置時的Firefox bug？

當絕對位置與居中的柔性箱項目一起使用時，我遇到此問題。它在Firefox中不起作用。居中的CSS flexbox - 使用絕對位置時的Firefox bug？

這裏是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絕對位置？

來源

2013-03-16 laukok

這些屬性是從2009年的規範，有利於規範目前正被逐步淘汰。如果您使用這些屬性是因爲您需要支持舊版/移動瀏覽器，請確保您也提供了其現代版本。 https://gist.github.com/cimmanon/727c9d558b374d27c5b6 – cimmanon 2013-03-16 11:47:38

Gecko渲染引擎中存在一個開放的錯誤：[Bug 579776]（https://bugzilla.mozilla.org/show_bug.cgi?id=579776）。 'position：absolute'將顯示屬性從'display：-moz-box'更改爲'display：block'。 – 2013-03-19 16:42:06

我能夠通過在我絕對定位的元素內部放置一個額外的div來解決這個問題，讓它顯示flexbox然後100％的高度和寬度。

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

這裏是我的執行小提琴：My Solution (http://jsfiddle.net/pmvjb/)

來源

2013-05-22 20:33:11 DavidBrear

居中的CSS flexbox - 使用絕對位置時的Firefox bug？

回答

相關問題