CSS垂直居中怎么實(shí)現(xiàn)

小編給大家分享一下CSS垂直居中怎么實(shí)現(xiàn)，相信大部分人都還不怎么了解，因此分享這篇文章給大家參考一下，希望大家閱讀完這篇文章后大有收獲，下面讓我們一起去了解一下吧！

你所需要的網(wǎng)站建設(shè)服務(wù)，我們均能行業(yè)靠前的水平為你提供.標(biāo)準(zhǔn)是產(chǎn)品質(zhì)量的保證，主要從事網(wǎng)站設(shè)計(jì)制作、成都做網(wǎng)站、企業(yè)網(wǎng)站建設(shè)、移動(dòng)網(wǎng)站建設(shè)、網(wǎng)頁(yè)設(shè)計(jì)、品牌網(wǎng)站制作、網(wǎng)頁(yè)制作、做網(wǎng)站、建網(wǎng)站。成都創(chuàng)新互聯(lián)公司擁有實(shí)力堅(jiān)強(qiáng)的技術(shù)研發(fā)團(tuán)隊(duì)及素養(yǎng)的視覺(jué)設(shè)計(jì)專才。

代碼實(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)垂直居中的

分析

首先我們要知道一個(gè)關(guān)鍵知識(shí)點(diǎn)，那就是：父元素基線（baseline）的位置是可以改變的，它不是固定的，記住這一點(diǎn)很重要
接著，我們精簡(jiǎ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é)果如下：

從圖中不難看出，對(duì)于:before偽元素（以下簡(jiǎn)稱偽元素）來(lái)說(shuō)，加與不加vertical-align:middle，結(jié)果都是一樣的，在垂直方向它始終會(huì)占滿父元素；但對(duì)于.child元素情況就不同了，它在垂直方向的位置發(fā)生了改變，那么這是為什么呢？
其實(shí)偽元素在此處的作用就是為了改變（或者叫重新定義）父元素baseline的位置，我們來(lái)回顧一下vertical-align:middle在MDN文檔中的定義

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

那么，對(duì)比我們的示例：

• 偽元素的中部就是它垂直方向的中點(diǎn)，這不難理解

• 父元素的基線我們暫且不管它在哪里，我們只要記住它是可以改變的就足夠了

• x-height的一半，因?yàn)槲覀冊(cè)诟冈刂袑?code>font-size置為0，所以x-height（小寫(xiě)x字母的高度）的一半也是0，即沒(méi)有高度

這樣一下，就相當(dāng)于偽元素的中點(diǎn)只要與父元素的基線對(duì)齊就可以了，因?yàn)?code>x-height是0，所以加與不加無(wú)所謂；再加上Css中元素默認(rèn)是左上方對(duì)齊的，對(duì)于這個(gè)限制，也就是說(shuō)當(dāng)偽元素加上vertical-align:middle后，默認(rèn)情況下它是不會(huì)超出父元素的范圍顯示的，那么這時(shí)偽元素高度已確定：父元素高度的100%，中點(diǎn)也已確定
接下來(lái)偽元素就會(huì)對(duì)父元素說(shuō)：我垂直方向的中點(diǎn)已經(jīng)確定了，變是不可能變的，這輩子都不可能變，但我的中點(diǎn)想和你的基線對(duì)齊，你自己看著辦吧
然后父元素妥協(xié)了，將它自身的基線移動(dòng)到與偽元素中點(diǎn)水平對(duì)齊的位置，到此父元素基線的位置也已確定，近似其高度的一半
最后.child元素添加了自己的vertical-align:middle，按照middle: 使元素的中部與父元素的基線加上父元素x-height的一半對(duì)齊這句定義，.child元素的font-size由于繼承關(guān)系也是0，所以它的中點(diǎn)也就自然而然與早已確定的父元素基線對(duì)齊，從而實(shí)現(xiàn)垂直居中，到此結(jié)束

以上是“CSS垂直居中怎么實(shí)現(xiàn)”這篇文章的所有內(nèi)容，感謝各位的閱讀！相信大家都有了一定的了解，希望分享的內(nèi)容對(duì)大家有所幫助，如果還想學(xué)習(xí)更多知識(shí)，歡迎關(guān)注創(chuàng)新互聯(lián)行業(yè)資訊頻道！

網(wǎng)頁(yè)名稱：CSS垂直居中怎么實(shí)現(xiàn)
URL鏈接：http://bm7419.com/article4/ipohoe.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供標(biāo)簽優(yōu)化、云服務(wù)器、網(wǎng)站營(yíng)銷、品牌網(wǎng)站建設(shè)、網(wǎng)站改版、網(wǎng)站導(dǎo)航

廣告

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請(qǐng)盡快告知，我們將會(huì)在第一時(shí)間刪除。文章觀點(diǎn)不代表本網(wǎng)站立場(chǎng)，如需處理請(qǐng)聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時(shí)需注明來(lái)源： 創(chuàng)新互聯(lián)