解決CSS垂直居中的幾種方法（基於絕對定位，基於視口單位，Flexbox方法）

李文楊發表於2017-09-18
CSSFlex

      在CSS中對元素進行水平居中是非常簡單的：如果它是一個行內元素，就對它的父元素應用 text-align: center ;如果它是一個塊級元素，就對它自身應用 margin: auto。然而如果要對一個元素進行垂直居中，可能光是想想就令人頭皮發麻了。

　　多年以來，垂直居中已經成為了CSS領域的聖盃，它同樣也是前端開發圈內廣為流傳的笑話。原因在於它同時具備以下幾條特徵：

              1）它是極其常見的需求。

              2）從理論上來看，它似乎極其簡單。

              3）在實踐中，它往往難如登天，當涉及尺寸不固定的元素時尤其如此。

      接下來我們具體說明一下這三個方法的簡單使用。

一、程式碼初始化

　   我們基於如下這段HTML程式碼，將id='content'的div元素在id='box'的div張垂直居中。

<body>  
<div id="box">  
    <div id="content">這是要居中的元素</div>  
</div>  
</body>

基本樣式如下：

#box{  
     margin:0;  
     padding:0;  
     width:500px;  
     height:500px;  
     background: #4AC291;  
     font-size:100%;  
     position: relative;  
}  
#content{  
     background: #655;  
     color: white;  
     text-align: center;  
     line-height: 2em;  
}

 

二、基於絕對定位的解決方法

      如果我們想要利用絕對定位的方法進行垂直劇中的話，那麼就要求元素具有固定的寬度和高度，如果沒有固定的寬度和高度就無法實現，因為需要利用top和left的值，進行定位。

#box{  
    margin:0;  
    padding:0;  
    width:500px;  
    height:500px;  
    background: #4AC291;  
    font-size:100%;  
    position: relative;    //必須的，因為下面的div要根據這個進行定位  
}  
#content{  
    background: #655;  
    color: white;  
    text-align: center;  
    line-height: 2em;  
    position: absolute;   //設定絕對定位  
    top:50%;  
    left:50%;  
    width:12em;  
    height:2em;  
    margin-top:-1em;    //    2/2=1  
    margin-left:-6em;   //    12/2=6

 

       如上圖所示，是固定寬高的樣式效果。

　　這段程式碼在本質上做了這樣幾件事情：先把這個元素的左上角放置在視口(或最近的、具有定位屬性的祖先元素)的正中心，然後再利用負外邊距把它向左、向上移動(移動距離相當於它自身寬高的一半)，從而把元素的正中心放置在視口的正中心。藉助強大的 calc() 函式，這段程式碼還可以省掉兩行宣告：

 #box{  
      margin:0;  
      padding:0;  
      width:500px;  
      height:500px;  
      background: #4AC291;  
      font-size:100%;  
      position: relative;  
  }  
  #content{  
      background: #655;  
      color: white;  
      text-align: center;  
      line-height: 2em;  
    /*position: absolute; 
      top:50%; 
      left:50%; 
      width:12em; 
      height:2em; 
      margin-top:-1em; 
      margin-left:-6em;*/  
      position: absolute;  
      width: 12em;  
      height: 2em;  
      top: calc(50% - 1em);  
      left: calc(50% - 6em);  
}

這個方法最大的侷限在於它要求元素的寬高是固定的。在通常情況下，對那些需要居中的元素來說，其尺寸往往是由其內容來決定的。如果能找到一個屬性的百分比值以元素自身的寬高作為解析基準，那我們的難題就迎刃而解了!遺憾的是，對於絕大多數CSS屬性(包括 margin)來說，百分比都是以其父元素的尺寸為基準進行解析的。

三、基於視口單位的解決方法

 

　   假設我們不想使用絕對定位，仍然可以採用translate()技巧來把這個元素以其自身寬高的一半為距離進行移動;但是在缺少left和top的情況下，如何把這個元素的左上角放置的容器的正中心呢?

　  我們的第一反應很可能是用margin屬性的百分比值來實現，就像這樣：

#content {  
  width: 12em;  
  margin: 50% auto 0;  
  transform: translateY(-50%);  
}

　這段程式碼產生的效果十分離譜。原因在於margin的百分比值時以父元素的寬度作為解析基準的。沒錯，即使對於margin-top和margin-bottom來說也是這樣!

　　不過幸運的是，如果只是想把元素相對於視口進行居中，仍然是有希望的。CSS值與單位(第三版)定義了一套新的單位，稱為視口相關的長度單位。

      1) vw 是與視口寬度相關的。與常人的直覺不符的是，1vw 實際上表示視口寬度的 1%，而不是 100%。

       2)  與 vw 類似，1vh 表示視口高度的 1%。

       3)  當視口寬度小於高度時，1vmin 等於 1vw，否則等於 1vh。

       4)  當視口寬度大於高度時，1vmax 等於 1vw，否則等於 1vh。

 五、絕對定位結合translate()方法 (不確定寬高的情況下)

 使用絕對定位將top和left設定為50%,再將元素本身使用translate分別沿著x和y軸移動-50%,此方法可以在不知道div寬高的情況下實現垂直居中;

#content {  
  width: 12em;  
  position:absoulte;
  top:50%;
  left:50%;
  transform: translateY(-50%,-50%);  
}

 

五、Flexbox方法（本文主要說明的方法）

 

      Flexbox(伸縮盒)是專門針對這類需求所設計的。我們之所以要討論其他方案，僅僅是因為那些方案在瀏覽器的支援程度上稍微好一些而已。其實目前現代瀏覽器對 Flexbox 的支援度已經相當不錯了。

　　我們只需寫兩行宣告即可：先給這個待居中元素的父元素設定 display: flex(在這個例子中是元素)，再給這個元素自身設定我們再熟悉不過的margin: auto。

#box{  
     display: flex;  
     min-height:50vh;  
     margin:0;  
     width:500px;  
     height:500px;  
     background: #4AC291;  
 }  
 #content{  
     margin:auto;  
     background: #655;  
     color: white;  
 }

  如果瀏覽器不支援Flexbox，頁面渲染結果看起來就跟我們的起點圖是一樣的了(如果設定了寬度的話)。雖然沒有垂直居中效果，但也是完全可以接受的。

　　Flexbo 的另一個好處在於，它還可以將匿名容器(即沒有被標籤包裹的文字節點)垂直居中。

 

相關文章