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

時間 2019-12-17

標籤解決 css 垂直居中幾種方法基於絕對定位單位 flexbox 欄目 CSS 简体版

原文原文鏈接

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

　　多年以來，垂直居中已經成爲了CSS領域的聖盃，它一樣也是前端開發圈內廣爲流傳的笑話。緣由在於它同時具有如下幾條特徵：瀏覽器

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

2）從理論上來看，它彷佛極其簡單。flex

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

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

1、代碼初始化code

　咱們基於以下這段HTML代碼，將id='content'的div元素在id='box'的div張垂直居中。orm

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

基本樣式以下：blog

#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;  
}

2、基於絕對定位的解決方法開發

若是咱們想要利用絕對定位的方法進行垂直劇中的話，那麼就要求元素具備固定的寬度和高度，若是沒有固定的寬度和高度就沒法實現，由於須要利用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)來講，百分比都是以其父元素的尺寸爲基準進行解析的。

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

　假設咱們不想使用絕對定位，仍然能夠採用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。

5、絕對定位結合translate()方法 (不肯定寬高的狀況下)

使用絕對定位將top和left設置爲50%,再將元素自己使用translate分別沿着x和y軸移動-50%,此方法能夠在不知道div寬高的狀況下實現垂直居中;

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

5、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;  
 }