垂直居中---只需要兩個(gè)小栗子

darkbug 發(fā)布于2019-08-22 16:46 / 938人閱讀

摘要：兩個(gè)小栗子講完了，你明白了么文章末尾，再送兩個(gè)小栗子當(dāng)一個(gè)里沒有內(nèi)容時(shí)高度為，當(dāng)有內(nèi)容比如文字時(shí)，就有了高度，難道是文字把撐開了其實(shí)不是，這個(gè)高度是由元素的決定的。代碼很簡單使用布局也可以實(shí)現(xiàn)居中紅色框上下居中文字在紅色框中居中

之前學(xué)習(xí)垂直居中的時(shí)候在網(wǎng)上找了很多方法，看的我眼花撩亂，一直想著整理一下思路，透過那些紛繁的招式看到本質(zhì)。
首先明確一下概念：

left是指子元素的左margin距離父元素的左padding的距離

margin：auto是自適應(yīng)的意思，由瀏覽器自動(dòng)計(jì)算

translatex：關(guān)于x軸的坐標(biāo)轉(zhuǎn)換，數(shù)值為百分?jǐn)?shù)時(shí)是相對(duì)于本身的寬高。

理解了以上三點(diǎn)，就基本能看懂各種垂直居中方法了

1.top:0;bottom:0;left:0;right:0;margin:auto;

這種方法的意思是先把子元素margin和父元素padding的距離置為0，可以理解為子元素和父元素之間沒有空隙，然后把margin置為auto，margin平分子元素和父元素之間的距離，也就是說子元素并不是真正意義的居中，只是子元素中間的內(nèi)容居中了，子元素和父元素之間的距離是計(jì)算機(jī)自動(dòng)計(jì)算的（平分）；注意這個(gè)方法需配合子元素position:absolute使用，因?yàn)槟J(rèn)情況下，margin：auto只對(duì)上下起作用，對(duì)左右不起作用，加上position使元素脫離標(biāo)準(zhǔn)流，margin：auto可識(shí)別

.father{
  width:400px;
  height:400px;
  background-color:pink;
  position:relative;
}
.son{
  width:100px;
  height:100px;
  background-color:red;
  position:absolute;
  top:0;
  bottom:0;
  left:0;
  right:0;
  margin:auto;
}

2.transform：translate()

這種方法適用于不知道父元素寬高的情況下（面試官可能會(huì)這樣問呢）。這種方法是通過先把元素定位到父元素的百分之五十的位置top:50%;left:50%;看下圖：

注意此時(shí)子元素的左上角在父元素中間，整個(gè)子元素處于父元素右下四分之一的左上角，然后通過transform：translate(-50%，-50%)，使子元素相對(duì)自身移動(dòng)百分之五十，這樣子元素就居中啦。需要注意的是自元素中要寫定位position:relative;這樣才能根據(jù)父元素識(shí)別到定位的基點(diǎn)。

.father{
    width:500px;
    height:500px;
    background-color:pink;
    /*position:relative;*/
}
.son{
    width:100px;
    height:100px;
    background-color: red;
    position:relative;
    top:50%;
    left:50%;
    transform:translate(-50%,-50%);
}

兩個(gè)小栗子講完了，你明白了么？文章末尾，再送兩個(gè)小栗子(#^.^#)

3.line-height

當(dāng)一個(gè)div里沒有內(nèi)容時(shí)高度為0，當(dāng)有內(nèi)容比如文字時(shí)，div就有了高度，難道是文字把div撐開了？其實(shí)不是，這個(gè)高度是由元素的line-height決定的。當(dāng)把line-height設(shè)置為該div的高度時(shí)，div中的文字就居中顯示了。代碼很簡單


  qqqqq

.line{             
width:100px;             
height:100px;             
line-height:100px;             
text-align:center;             
background:gray; 
}

4、table

使用table布局也可以實(shí)現(xiàn)居中


  
    qqqqq
  
  
    qqqqq

.father{
  width:400px;
  height:200px;
  display:table-cell;
  text-align:center;
  vertical-align:middle;    //紅色框上下居中
  background-color:pink;
}
.son{
  width:100px;
  height:100px;
  display:inline-block;
  background-color:red;
  line-height:100px;      //文字在紅色框中居中
}