使用纯 CSS 垂直对齐（来自 YUI）答案

【问题标题】：Vertical-align with Pure CSS (from YUI)使用纯 CSS 垂直对齐（来自 YUI）
【发布时间】：2014-04-07 06:21:15
【问题描述】：

如何使用 PureCSS, from YUI 将vertical-align: middle 添加到元素中？

我有三个高度相同的元素，我想要“内部”，它们有vertical-align: middle。

我得到的最接近的是display: table; width: 100%，但这个BUG是“移动版”，所以我想要一个适用于所有版本（平板电脑/台式机/手机）的解决方案。

【问题讨论】：

【解决方案1】：

使用弹性盒！这是我在 Chrome 中测试过的 JSFiddle。

我在.a,.b,.c 上指定了display: flex 并在.inside 上指定了margin: auto

要制作这个跨浏览器，只需确保使用所有供应商前缀。

【讨论】：

浏览器兼容性怎么样？？
谢谢你，伊莱。此处的浏览器兼容性：caniuse.com/flexbox - 与 非实际 浏览器不兼容，但 - 直到现在 - 是最好的答案，因为仅适用于 CSS 并且不使用 media queries（我的第二个出路）。
“非实际”浏览器是什么意思？一旦你使用了适当的前缀等，Flexbox 的支持就会非常广泛。
你说得对，我不知道我在哪里看到的。对不起，谢谢你的回答。 :-)
西班牙语中的实际相当于英语中的现代。对于那些可能对此声明感到困惑的人。

【解决方案2】：

你去：http://jsfiddle.net/kn88b/3/。 display:table 用于父元素，display:table-cell; vertical-align:middle; 用于子内容

【讨论】：

查看“移动版”（将 jsfiddle 预览窗口调整为更小的尺寸）。这就是我所说的错误，.a 的大小比.b 和.c 大。（图片：i.imgur.com/wHfmAzP.png）