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

【问题标题】：-moz-box does not work when child has % width当孩子有 % 宽度时 -moz-box 不起作用
【发布时间】：2013-08-24 08:28:40
【问题描述】：

我们使用 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/

任何帮助将不胜感激干杯

【问题讨论】：

标签： css google-chrome firefox html vertical-alignment

【解决方案1】：

您使用的是过时的弹性盒规范。

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

【讨论】：

哇，这速度很快，而且效果很好；）顺便说一句，IE 的等价物是什么？
从未尝试过 IE，我也没有在 ATM 周围的 Windows 框可以检查，但 caniuse.com/#search=flex 说 IE 10 有点支持 -ms 前缀。
完美。这是 IE/Chrome/Firefox 的一个分支：jsfiddle.net/hberf。继续努力:)
你的 JSFiddle 不能在 FF35 中运行，在 Chrome40 中运行良好。