css - 当孩子有 % 宽度时 -moz-box 不起作用

Question

我们使用 display:-moz-box/-webkit-box 在另一个 div 中垂直居中一个 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

您正在使用过时的 flexbox 规范。

• MDN 上的新flexbox文章
• W3C CSS Flexbox CR
• JSFiddle，这似乎适用于 Firefox 23 和 Chrome 28