今天面試了一個前端實習生，我問了一個比較簡單的問題，就是css如何實作元素垂直居中的問題，但是要說出多種方案，其實他說的不錯，基本上說到了flex布局，grid布局等下面提到的布局，還不錯，但是這幾種都是已經經常用的，老生常談，但是我想聽到他說一種用的比較少的解決方案，了解一下他學習的深度和廣度，但是很遺憾他沒有說出來，
今天就給大家講一講這個解決方案吧
眾所周知，“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
-
父元素基線的位置可改變
只要理解了原理，我們就不用死記硬背代碼，也不會忘記如何實作；文中如有錯誤，歡迎指正~
對于垂直居中這種常見問題，哪種方案是你的最愛呢，歡迎留言討論~
對了，小編為大家準備了一套2020最新的web前端資料，需要點擊下方鏈接獲取方式
學習前端，你掌握這些，二線也能輕松拿8K以上
轉載請註明出處，本文鏈接：https://www.uj5u.com/qiye/7067.html
標籤：Html/Css