使用 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 使浮動元素垂直居中