CSS元素垂直居中【內含vertical-align 與 line-height 屬性詳解】

請必定看到最後，flex太使人驚喜！ ヾ(o◕∀◕)ﾉ

入個門

先來考慮這樣一個問題：一行文字在一個固定高度的父div中怎樣作到垂直居中？
咱們都知道設置父div的line-height 等於它的height就能夠了，像下面這樣：

//html
<div><span>我要垂直居中</span></div>
//css
div {
  padding: 10px;
  height: 120px;
  line-height: 120px;
  font-size: 16px;
  background: pink;
}

效果以下圖：

原理也很簡單，line-height設置以後，文字的行高隨之改變。來看一下設置line-height後具體的改變方式：

用 ling-height的值減去文字 font-size的值，即 (120 - 16) = 104px，把它們的差 `104 / 2
= 52px` 分別加到文字的上方和下方。因此文字最終能夠在整個div中垂直居中顯示。

補充一點關於line-heihgt取值設置爲百分比與設置爲數字的不一樣：
假如當前元素font-size: 30px;咱們想讓行高爲字體大小的3倍，就會設置line-height: 300%; 或 line-height: 3;，而假如這個元素有一個子元素，字體設置爲font-size: 16px;。那麼設置爲300%的時候，子元素的行高爲90px，即先計算，後繼承；設置爲3的時候，子元素的行高爲48px，即先繼承下來，再計算。

jsfillder中的例子

只有文字的時候咱們用上述方法就能夠實現垂直居中，那麼若是div中包含圖片和文字呢？

進個階

也就是寫這篇文章的實際問題來源：

一個div中包含兩個子元素：左側圖片，右側文字。已知圖片高度遠高於文字，怎樣作到圖片和文字都垂直居中呢？

若是依然使用上面設置line-height的方法：：

//html
<div>
  <img src="https://o21.xyz/content/images/2016/11/juwairen.jpg" />
  <span>我要豎直居中</span>
</div>
//css
div {
  padding: 10px;
  height: 160px;
  line-height: 160px;
  font-size: 16px;
  background: pink;
}
img {
  width: 70px;
  height: 70px;
}

效果倒是這樣的：

能夠看到，只是文字居中了，圖片的位置不是咱們想要的。緣由是：圖片img有一個vertical-align屬性，定義的是行內元素的基線 與 元素所在行的基線在垂直方向上的位置關係。默認值爲baseline，即把元素放在父元素的基線上。

【注意：這個元素始終參照元素行高哦！因此若是是想讓行高爲14px的行內元素在一個50px高的div中垂直居中首先須要把該行內元素的line-height改成50px哦 ●ω●】

除了默認值，vertical-align還有如下幾種常見取值，依次來試一下吧：

（其中，若設置百分比，參照物是line-height的值。）

img { vertical-align: top; } //    把元素的頂端與行中最高元素的頂端對齊

img { vertical-align: bottom; } //把元素的頂端與行中最低元素的頂端對齊

img { vertical-align: text-top; } //把元素的頂端與父元素字體的頂端對齊

img { vertical-align: text-bottom; } //把元素的底端與父元素字體的底端對齊

img { vertical-align: middle; } //把此元素放置在父元素的中部

能夠發現，設置值爲middle就是咱們想要的結果。

另外，vertical-align還能夠設置百分比和數值，當設置爲負值時，圖片會向下移動。

萬萬沒想到：用flex兩行代碼就實現了 ●０●

只要給容器加上下面兩條樣式，就成功垂直居中了，line-height都是多餘了的。

display: flex;
align-items: center;

完整代碼是這樣：

//html
<div>
  <img src="https://o21.xyz/content/images/2016/11/juwairen.jpg" />
  <span>我要豎直居中</span>
</div>

//css
div {
  display: flex;
  align-items: center;
  padding: 10px;
  height: 160px;
  font-size: 16px;
  background: pink;
}
img {
  width: 70px;
  height: 70px;
}

So easy !
附上阮老師寫的flex教程：
Flex 佈局教程：語法篇
Flex 佈局教程：實例篇

參考資料：
http://www.w3school.com.cn/cs...
https://developer.mozilla.org...
http://stackoverflow.com/ques...
https://developer.mozilla.org...