CSS實現元素居中原理解析

laixiangran發表於2018-10-12
CSS

在 CSS 中要設定元素水平垂直居中是一個非常常見的需求了。但就是這樣一個從理論上來看似乎實現起來極其簡單的，在實踐中，它往往難住了很多人。

讓元素水平居中相對比較簡單：如果它是一個行內元素，就對它的父元素應用 text-align: center；如果它是一個塊級元素，就對它自身應用 margin: auto。

然而如果要對一個元素進行垂直居中，那就沒有那麼容易了，有時候光是想想就令人頭皮發麻了。

本文分別從行內元素和塊級元素進行說明，將目前比較流行的實現方式進行彙集並解析實現原理，方便大家查閱。這裡要說明一點，每一種方式都不是十全十美的，關鍵要看自己的需求，從而分析出哪種實現方式是最合適的。

行內元素

首先我們先把基礎程式碼寫出來：

<div class="main">
    <span class="content">我是要居中的行內元素span</span>
</div>
複製程式碼
.main {
    width: 300px;
    height: 300px;
    background-color: #50ba8b;
}

.content {
    background-color: #5b4d4e;
    color: #FFFFFF;
}
複製程式碼

class 為 .main 的 div 包裹這一個 class 為 .content 的行內元素 span，我們的目的就是要讓 .content 元素 在 .main 元素中居中。

水平居中

text-align

行內元素的水平居中比較簡單，我們直接在 .main 中新增 text-align: center; 即可，此時 .main 變為：

.main {
    width: 300px;
    height: 300px;
    background-color: #50ba8b;
    
    text-align: center;  /* 水平居中 */
}
複製程式碼

實現原理： 設定 text-align 的值為 center ，因為該屬性規定元素中的文字的水平對齊方式，那麼設定為 center 則文字就水平居中了。

垂直居中

line-height

行內元素的垂直居中我們分為 一行 和 多行或者圖片等替換元素 來說明。

如果是 一行，那麼我們可以使用 line-height 來實現，此時 .main 元素 css 程式碼變為：

.main {
    width: 300px;
    height: 300px; /* 可以不設定 */
    background-color: #50ba8b;

    line-height: 300px; /* 垂直居中 */
}
複製程式碼

其實設定了 line-height 就可以讓文字垂直居中，並不需要同時設定 height，這裡也是一直存在的一個誤區。

實現原理： 這種方式實現垂直居中運用的是 CSS 中“行距的上下等分機制”，這也說明了為什麼該方式只適用於 一行 的文字。

還有一點需要說明是，這種方式實現的垂直居中是“近似”的，並不是完美的垂直居中，因為文字字形的垂直中線位置普遍要比真正的“行框盒子”的垂直中線位置低，而由於我們平時使用的 font-size 比較小，使得這點偏差不容易察覺出來，那麼感官上也就看成是垂直居中了。

line-height 及 vertical-align

下面再來說說 多行或者圖片等替換元素 的垂直居中效果實現，這裡我們需要同時藉助 line-height 和 vertical-align 來實現。

先讓文字換行：

<div class="main">
    <span class="content">
        我是要居中的行內元素span <br>
        我是要居中的行內元素span
    </span>
</div>
複製程式碼

再看修改之後的 css 程式碼：

.main {
    width: 300px;
    background-color: #50ba8b;

    line-height: 300px;
}

.content {
    display: inline-block;
    background-color: #5b4d4e;
    color: #FFFFFF;
    line-height: 20px;
    margin: 0 20px;
    vertical-align: middle;
}
複製程式碼

實現原理：

  1. 設定 .content 元素的 display 為 inline-block。作用在於既能重置外部的 line-height 為正常大小，又能保持行內元素特性，從而可以設定 vertical-align 屬性，以及產生一個非常關鍵的“行框盒子”。我們需要的其實並不是這個“行框盒子”，而是每個“行框盒子”都會附帶的一個產物 —— “幽靈空白節點”，即一個寬度為 0，表現如同普通字元的看不見的“節點”。有了這個“幽靈空白節點”，我們的 line-height: 300px; 就有了作用的物件，從而相當於在 .content 元素前面撐起了一個高度為 300px 的寬度為 0 的行內元素。
  2. 因為行內元素預設都是基線對齊的，所以我們通過對 .content 元素設定 vertical-align: middle; 來調整多行文字的垂直位置，從而實現我們想要的“垂直居中”效果。這種方式也適用於 圖片等替換元素 的垂直居中效果。當然這裡的“垂直居中”也是近似的，這是由於 vertical-align 導致的，具體為什麼可以深入瞭解 vertical-align: middle;。

塊級元素

依然先把基礎程式碼寫出來：

<div class="main">
    <div class="content">我是要居中的塊級元素div</div>
</div>
複製程式碼
.main {
    width: 300px;
    height: 300px;
    background-color: #50ba8b;
}

.content {
    width: 150px;
    height: 150px;
    background-color: #5b4d4e;
}
複製程式碼

class 為 .main 的 div 包裹這一個 class 為 .content 的 塊級元素 div，我們的目的就是要讓 .content 元素 在 .main 元素中居中。

position + margin: auto

實現程式碼如下：

.main {
    width: 300px;
    height: 300px;
    background-color: #50ba8b;
    
    /*關鍵程式碼*/
    position: relative;
}

.content {
    width: 150px;
    height: 150px;
    background-color: #5b4d4e;

    /*關鍵程式碼*/
    position: absolute;
    top: 0;
    left: 0;
    bottom: 0;
    right: 0;
    margin: auto;
}
複製程式碼

實現原理：

  1. 設定 .main 元素為相對定位 position: relative;，這樣其子元素設定絕對定位時就相對它了。
  2. 然後設定 .content 元素為絕對定位 position: absolute; 並設定它的 top、left、bottom、right 都為0，這樣該元素的元素的尺寸表現為“格式化寬度和格式化高度”，和 <div> 的“正常流寬度”一樣，同屬於外部尺寸，也就是尺寸自動填充父級元素的可用尺寸，但由於此時我們設定了 .content 元素的寬高，就限制了元素自動填充，這樣就多出來150px的空間了。
  3. 最後我們設定 .content 元素為 margin: auto; ，此時根據 auto 的計算規則，將上下左右剩餘空間全部等分了，自然就居中了。

position + margin-left/top

實現程式碼如下：

.main {
    width: 300px;
    height: 300px;
    background-color: #50ba8b;
    
    /*關鍵程式碼*/
    position: relative;
}

.content {
    width: 150px;
    height: 150px;
    background-color: #5b4d4e;

    /*關鍵程式碼*/
    position: absolute;
    top: 50%;
    left: 50%;
    margin-left: -75px;
    margin-top: -75px;
}
複製程式碼

實現原理：

  1. 設定 .main 元素為相對定位 position: relative;，這樣其子元素設定絕對定位時就相對它了。
  2. 然後設定 .content 元素為絕對定位 position: absolute; 並設定 top: 50%;、left: 50%;，這樣.content 元素的左上角就位於 .main 元素的中心了。
  3. 最後設定 .content 元素 margin-left: -75px;、margin-top: -75px; 將自身左移及上移寬高的一半，這樣 .content 元素的中心處於 .main 元素的中心處，自然就實現了居中效果。
  4. 這種方法的缺點就是需要固定 .content 元素的寬高。

position + translate

實現程式碼如下：

.main {
    width: 300px;
    height: 300px;
    background-color: #50ba8b;
    
    /*關鍵程式碼*/
    position: relative;
}

.content {
    width: 150px;
    height: 150px;
    background-color: #5b4d4e;

    /*關鍵程式碼*/
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}
複製程式碼

實現原理：

  1. 設定 .main 元素為相對定位 position: relative;，這樣其子元素設定絕對定位時就相對它了。
  2. 然後設定 .content 元素為絕對定位 position: absolute; 並設定 top: 50%;、left: 50%;，這樣.content 元素的左上角就位於 .main 元素的中心了。
  3. 最後設定 .content 元素 transform: translate(-50%, -50%); 將自身左移及上移寬高的一半，這樣 .content 元素的中心處於 .main 元素的中心處，自然就實現了居中效果。
  4. 這種方法的好處就是不需要固定 .content 元素的寬高。

Flexbox

實現程式碼如下：

.main {
    width: 300px;
    height: 300px;
    background-color: #50ba8b;

    /*關鍵程式碼*/
    display: flex;
}

.content {
    width: 150px;
    height: 150px;
    background-color: #5b4d4e;

    /*關鍵程式碼*/
    margin: auto;
}
複製程式碼

實現原理：

  1. 設定 .main 元素 display: flex;。
  2. 然後設定 .content 元素為 margin: auto; 即可實現居中。
  3. 這是毋庸置疑的最佳解決方案，我們不需要設定 .content 元素為絕對定位，margin: auto 自然就可以作用於寬高，而且我們也不需要設定 .content 元素的寬高， 因為Flexbox(伸縮盒)是專門針對這類需求所設計的。
  4. 缺點就是目前瀏覽器支援程度相對其它方式會低些。

Flexbox 的另一個好處在於，它還可以將匿名容器(即沒有被標籤包裹的文字節點)垂直居中。比如我們不設定 .main 元素為 display: flex;，而是設定 .content 元素為 display: flex;，並藉助 Flexbox 規範所引入的 align-items 和 justify-content 屬性，我們可以讓它內部的文字也實現居中（我們可以對.main 元素使用相同的屬性來使 .content 元素元素居中，但比 margin: auto 方法要更加優雅一些，並且同時起到了回退的作用）。

.content {
    width: 150px;
    height: 150px;
    background-color: #5b4d4e;

    /*關鍵程式碼*/
    display: flex;
    align-items: center;
    justify-content: center;
    margin: auto;
}
複製程式碼

轉載請註明出處，謝謝！

CSS實現元素居中原理解析

相關文章