理解:before僞類搭配vertical-align:middle實現垂直居中的原理

前言

總所周知，「Css如何實現元素垂直居中？」已是一個老生常談的問題了，這個問題目前已經有了許多解決方案，這些方案也都有各自適用的場景以及優缺點，大體以下：

• flex佈局
• grid佈局
• table佈局
• line-height搭配height
• position搭配margin
• position搭配transform
• ...

那麼今天咱們就來理解其中一種有效但不常被使用的方案的原理，它就是：僞元素:before搭配vertical-align:middle實現元素垂直居中，先來看一下具體的代碼實現：

<style type="text/css">
  .parent {
    display: inline-block;
    width: 300px;
    height: 300px;
    font-size: 0;
    background: #80848f;
    text-align: center;
  }
  .parent:before {
    display: inline-block;
    width: 20px;
    height: 100%;
    content: '';
    background: #ff9900;
    vertical-align: middle;
  }
  .child {
    display: inline-block;
    width: 50px;
    height: 50px;
    background: #19be6b;
    vertical-align: middle;
  }
</style>

<div class="parent">
  <div class="child">child</div>
</div>

上面的代碼運行結果是這樣的：

相信代碼你們已經很熟悉了，可是你真正理解其中的原理嗎？下面咱們就看一下它是如何怎樣一步步實現垂直居中的

分析

首先咱們要知道一個關鍵知識點，那就是：父元素基線（baseline）的位置是能夠改變的，它不是固定的，記住這一點很重要

接着，咱們精簡一下代碼，去掉關鍵部分

<style type="text/css">
  .parent {
    display: inline-block;
    width: 300px;
    height: 300px;
    /* font-size: 0; */
    background: #80848f;
    text-align: center;
  }
  .parent:before {
    display: inline-block;
    width: 20px;
    height: 100%;
    content: '';
    background: #ff9900;
    /* vertical-align: middle; */
  }
  .child {
    display: inline-block;
    width: 50px;
    height: 50px;
    background: #19be6b;
    /* vertical-align: middle; */
  }
</style>

<div class="parent">
  <div class="child">child</div>
</div>

咱們將font-size:0和vertical-align:middle註釋後，運行結果以下：

從圖中不難看出，對於:before僞元素（如下簡稱僞元素）來講，加與不加vertical-align:middle，結果都是同樣的，在垂直方向它始終會佔滿父元素；但對於.child元素狀況就不一樣了，它在垂直方向的位置發生了改變，那麼這是爲何呢？

其實僞元素在此處的做用就是爲了改變（或者叫從新定義）父元素baseline的位置，咱們來回顧一下vertical-align:middle在MDN文檔中的定義

middle: 使元素的中部與父元素的基線加上父元素x-height的一半對齊

那麼，對比咱們的示例：

• 僞元素的中部就是它垂直方向的中點，這不難理解
• 父元素的基線咱們暫且無論它在哪裏，咱們只要記住它是能夠改變的就足夠了
• x-height的一半，由於咱們在父元素中將font-size置爲0，因此x-height（小寫x字母的高度）的一半也是0，即沒有高度

這樣一下，就至關於僞元素的中點只要與父元素的基線對齊就能夠了，由於x-height是0，因此加與不加無所謂；再加上Css中元素默認是左上方對齊的，對於這個限制，也就是說當僞元素加上vertical-align:middle後，默認狀況下它是不會超出父元素的範圍顯示的，那麼這時僞元素高度已肯定：父元素高度的100%，中點也已肯定

接下來僞元素就會對父元素說：我垂直方向的中點已經肯定了，變是不可能變的，這輩子都不可能變，但個人中點想和你的基線對齊，你本身看着辦吧

而後父元素妥協了，將它自身的基線移動到與僞元素中點水平對齊的位置，到此父元素基線的位置也已肯定，近似其高度的一半

最後.child元素添加了本身的vertical-align:middle，按照middle: 使元素的中部與父元素的基線加上父元素x-height的一半對齊這句定義，.child元素的font-size因爲繼承關係也是0，因此它的中點也就天然而然與早已肯定的父元素基線對齊，從而實現垂直居中，到此結束

總結

其實該種垂直居中方式的原理主要有如下幾個要點：

• Css中元素默認是左上方對齊的
• 僞元素高度與父元素保持統一
• 父元素將font-size置爲0，進而x-height也被置爲0
• 父元素基線的位置可改變

只要理解了原理，咱們就不用死記硬背代碼，也不會忘記如何實現；文中若有錯誤，歡迎指正~

原文地址：https://guoyunfeng.com/2019/1...