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

阿新 • • 發佈：2019-01-15

在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。

四、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 的另一個好處在於，它還可以將匿名容器(即沒有被標籤包裹的文字節點)垂直居中。

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

css垂直居中幾種方法（二）

CSS垂直居中幾種方法

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

css垂直居中七種方法

css 垂直居中的幾種方法

css實現垂直居中的幾種方式（佈局常用）

css垂直居中的四種方法

CSS中常用到的一些解決問題方法（整理一些真正有效能夠使用到專案中的方法）（等待不斷更新積累）

jq 追加元素的幾種方法（append()、prepend()、after()、before()、insertAfter()、insertBefore()）

CSS 垂直居中的11種方式

CSS垂直居中的11種實現方式

android app -- 關於listview的幾種用法（複用，不復用，半複用）解決item狀態改變的問題

CSS垂直居中的三種方式

vue開發環境解決跨域的幾種方法

如何讓DIV水平和垂直居中三種方法

解決高併發的幾種方法

垂直居中四種方法

HTML中引入CSS檔案的幾種方法

未知寬高div水平垂直居中3種方法

微信小程式文字水平垂直居中對齊問題（完美解決方案）

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

相關推薦