使用 Flexbox 使浮动元素垂直居中

垂直居中一直是一个很麻烦的问题，但基于 FlexBox 的垂直居中就很是简单了。

考虑下面的场景：

• 你正在使用网格布局的框架，好比 Bootstrap、Foundation、 Skeleton、Susy 等。
• 你有两个包含动态内容的列（每列都是一个盒模型），你并不知道每列的具体尺寸，也不知道哪一个更高。
• 你须要这两列可以垂直居中。

咱们但愿获得的布局就像下面这样：

但默认状况下，这两列将会顶部对齐：

因此问题来了，在不改变浮动布局的前提下，咱们应该如何是元素垂直居中对齐？到目前为止，这个简单的问题都很是难以解决。

是否可使用 vertical-align:middle

很不幸，不能，由于一些不一样的缘由。

首先，在 MDN->CSS 中有关于 vertical-align 的描述 The vertical-align CSS property specifies the vertical alignment of an inline or table-cell box.。咱们的元素不是 inline、inline-block 或 table-cells，因此在不改变 display 的状况下 vertical-align:middle 并不会生效。

其次，网格布局的框架使用了 float:right 来对咱们的两列元素进行定位，在 W3C->CSS->9.5.1 Positioning the float: the 'float' property 第八条有描述 A floating box must be placed as high as possible.。这意味着浮动元素总会被固定在顶部。

第一个问题咱们能够经过将 display 改成 inline-block 或者 table-cell 解决，但没有 CSS 技术能够解决第二个问题。咱们须要移除浮动规则，但这会破坏基于网格布局的框架的基础。

使用 Flexbox 解决问题

像往常同样，Flexbox 对咱们的问题有一个简单的解决方案。只须要简单的两步就好了：

1. 为元素添加 display: flex 规则。
2. 为对元素添加 ‘align-items: center 规则。

这样就能够了！下面是一个简单的 HTML 和 CSS 例子：

<div class="container">
 <div class="column-1">[Dynamic content]</div>
 <div class="column-2">[Dynamic content]</div>
</div>

.container {
  display: flex;
  align-items: center;
}

.column-1,
.column-2 {
  float: left;
  width: 50%;
}

<p data-height="265" data-theme-id="light" data-slug-hash="RZWYZX" data-default-tab="html,result" data-user="nodejh" data-embed-version="2" data-pen-title="RZWYZX" class="codepen">See the Pen RZWYZX by Hang Jiang (@nodejh) on CodePen.</p>
<script async src="https://production-assets.cod...

你能够从下面的动画中看到，两列元素将会根据内容的变化而始终保持垂直居中对齐：

这种解决方法最好的一点是经过添加两个规则，在没有对两列元素的本来样式作任何修改的前提下就实现了垂直居中对齐。如今大部分浏览器都支持 flex，老的浏览器会忽略该规则，元素将保持顶部对齐。

关于 flexbox 的浏览器兼容性能够在 Can I Use Flexbox 查看获得：

---

• 使用 Flexbox 使浮动元素垂直居中