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;
}
複製代碼

---

轉載請註明出處，謝謝！