您好,登錄后才能下訂單哦!
小編給大家分享一下CSS垂直居中怎么實(shí)現(xiàn),相信大部分人都還不怎么了解,因此分享這篇文章給大家參考一下,希望大家閱讀完這篇文章后大有收獲,下面讓我們一起去了解一下吧!
代碼實(shí)現(xiàn):
<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>
上面的代碼運(yùn)行結(jié)果是這樣的:
相信代碼大家已經(jīng)很熟悉了,但是你真正理解其中的原理嗎?下面我們就看一下它是如何怎樣一步步實(shí)現(xiàn)垂直居中的
分析
首先我們要知道一個關(guān)鍵知識點(diǎn),那就是:父元素基線(baseline)的位置是可以改變的,它不是固定的,記住這一點(diǎn)很重要
接著,我們精簡一下代碼,去掉關(guān)鍵部分
<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
注釋后,運(yùn)行結(jié)果如下:
從圖中不難看出,對于:before
偽元素(以下簡稱偽元素)來說,加與不加vertical-align:middle,結(jié)果都是一樣的,在垂直方向它始終會占滿父元素;但對于.child元素情況就不同了,它在垂直方向的位置發(fā)生了改變,那么這是為什么呢?
其實(shí)偽元素在此處的作用就是為了改變(或者叫重新定義)父元素baseline的位置,我們來回顧一下vertical-align:middle
在MDN文檔中的定義
middle: 使元素的中部與父元素的基線加上父元素x-height
的一半對齊
那么,對比我們的示例:
偽元素的中部就是它垂直方向的中點(diǎn),這不難理解
父元素的基線我們暫且不管它在哪里,我們只要記住它是可以改變的就足夠了
x-height的一半,因為我們在父元素中將font-size
置為0,所以x-height
(小寫x字母的高度)的一半也是0,即沒有高度
這樣一下,就相當(dāng)于偽元素的中點(diǎn)只要與父元素的基線對齊就可以了,因為x-height
是0,所以加與不加無所謂;再加上Css中元素默認(rèn)是左上方對齊的,對于這個限制,也就是說當(dāng)偽元素加上vertical-align:middle
后,默認(rèn)情況下它是不會超出父元素的范圍顯示的,那么這時偽元素高度已確定:父元素高度的100%,中點(diǎn)也已確定
接下來偽元素就會對父元素說:我垂直方向的中點(diǎn)已經(jīng)確定了,變是不可能變的,這輩子都不可能變,但我的中點(diǎn)想和你的基線對齊,你自己看著辦吧
然后父元素妥協(xié)了,將它自身的基線移動到與偽元素中點(diǎn)水平對齊的位置,到此父元素基線的位置也已確定,近似其高度的一半
最后.child元素添加了自己的vertical-align:middle
,按照middle: 使元素的中部與父元素的基線加上父元素x-height
的一半對齊這句定義,.child元素的font-size
由于繼承關(guān)系也是0,所以它的中點(diǎn)也就自然而然與早已確定的父元素基線對齊,從而實(shí)現(xiàn)垂直居中,到此結(jié)束
以上是“CSS垂直居中怎么實(shí)現(xiàn)”這篇文章的所有內(nèi)容,感謝各位的閱讀!相信大家都有了一定的了解,希望分享的內(nèi)容對大家有所幫助,如果還想學(xué)習(xí)更多知識,歡迎關(guān)注億速云行業(yè)資訊頻道!
免責(zé)聲明:本站發(fā)布的內(nèi)容(圖片、視頻和文字)以原創(chuàng)、轉(zhuǎn)載和分享為主,文章觀點(diǎn)不代表本網(wǎng)站立場,如果涉及侵權(quán)請聯(lián)系站長郵箱:is@yisu.com進(jìn)行舉報,并提供相關(guān)證據(jù),一經(jīng)查實(shí),將立刻刪除涉嫌侵權(quán)內(nèi)容。