css - 子の幅が % の場合、-moz-box が機能しない

Question

display:-moz-box/-webkit-box を使用して、div を別の div 内で垂直方向に中央揃えにしています。子 div に絶対幅がある場合に機能する場合、子の幅がパーセンテージにすぎない場合、Firefox では適切にレンダラーになりません。

<div style="background:yellow;height:40px;display:-moz-box;-moz-box-pack:center;
-moz-box-align:center;display:-webkit-box;-webkit-box-pack:center;
-webkit-box-align:center">
    <div style="width:70%;background:blue;text-align:center">
        Hello World
    </div>
 </div> 

クロム

ファイアフォックス

問題を示すフィドルは次のとおりです。 http://jsfiddle.net/sBdWW/

任意の助けをいただければ幸いです乾杯

Answer 1

古いフレックスボックス仕様を使用しています。

• MDNの新しいflexbox記事
• W3C CSS フレックスボックス CR
• JSFiddle、Firefox 23 および Chrome 28 で動作するようです