当子具有％宽度时，-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 article
• W3C CSS Flexbox CR
• JSFiddle，这似乎适用于Firefox 23和Chrome 28