在 CSS 中要設(shè)置元素水平垂直居中是一個(gè)非常常見的需求了。但就是這樣一個(gè)從理論上來(lái)看似乎實(shí)現(xiàn)起來(lái)極其簡(jiǎn)單的，在實(shí)踐中，它往往難住了很多人。

讓元素水平居中相對(duì)比較簡(jiǎn)單：如果它是一個(gè)行內(nèi)元素，就對(duì)它的父元素應(yīng)用 text-align: center；如果它是一個(gè)塊級(jí)元素，就對(duì)它自身應(yīng)用 margin: auto。

然而如果要對(duì)一個(gè)元素進(jìn)行垂直居中，那就沒有那么容易了，有時(shí)候光是想想就令人頭皮發(fā)麻了。

本文分別從行內(nèi)元素和塊級(jí)元素進(jìn)行說明，將目前比較流行的實(shí)現(xiàn)方式進(jìn)行匯集并解析實(shí)現(xiàn)原理，方便大家查閱。這里要說明一點(diǎn)，每一種方式都不是十全十美的，關(guān)鍵要看自己的需求，從而分析出哪種實(shí)現(xiàn)方式是最合適的。

行內(nèi)元素

首先我們先把基礎(chǔ)代碼寫出來(lái)：

<div class="main">    <span class="content">我是要居中的行內(nèi)元素span</span></div>

.main {    width: 300px;    height: 300px;    background-color: #50ba8b;}.content {    background-color: #5b4d4e;    color: #FFFFFF;}

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

水平居中

text-align

行內(nèi)元素的水平居中比較簡(jiǎn)單，我們直接在 .main 中添加 text-align: center; 即可，此時(shí) .main 變?yōu)椋?/p>

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

實(shí)現(xiàn)原理： 設(shè)置 text-align 的值為 center ，因?yàn)樵搶傩砸?guī)定元素中的文本的水平對(duì)齊方式，那么設(shè)置為 center 則文本就水平居中了。

垂直居中

line-height

行內(nèi)元素的垂直居中我們分為 一行 和 多行或者圖片等替換元素 來(lái)說明。

如果是 一行，那么我們可以使用 line-height 來(lái)實(shí)現(xiàn)，此時(shí) .main 元素 css 代碼變?yōu)椋?/p>

.main {    width: 300px;    height: 300px; /* 可以不設(shè)置 */    background-color: #50ba8b;    line-height: 300px; /* 垂直居中 */}

其實(shí)設(shè)置了 line-height 就可以讓文本垂直居中，并不需要同時(shí)設(shè)置 height，這里也是一直存在的一個(gè)誤區(qū)。

實(shí)現(xiàn)原理： 這種方式實(shí)現(xiàn)垂直居中運(yùn)用的是 CSS 中“行距的上下等分機(jī)制”，這也說明了為什么該方式只適用于 一行 的文本。

還有一點(diǎn)需要說明是，這種方式實(shí)現(xiàn)的垂直居中是“近似”的，并不是完美的垂直居中，因?yàn)槲淖肿中蔚拇怪敝芯€位置普遍要比真正的“行框盒子”的垂直中線位置低，而由于我們平時(shí)使用的 font-size 比較小，使得這點(diǎn)偏差不容易察覺出來(lái)，那么感官上也就看成是垂直居中了。

line-height 及 vertical-align

下面再來(lái)說說 多行或者圖片等替換元素 的垂直居中效果實(shí)現(xiàn)，這里我們需要同時(shí)借助 line-height 和 vertical-align 來(lái)實(shí)現(xiàn)。

先讓文本換行：

<div class="main">    <span class="content">        我是要居中的行內(nèi)元素span <br>        我是要居中的行內(nèi)元素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;}

實(shí)現(xiàn)原理：

• 設(shè)置 .content 元素的 display 為 inline-block。作用在于既能重置外部的 line-height 為正常大小，又能保持行內(nèi)元素特性，從而可以設(shè)置 vertical-align 屬性，以及產(chǎn)生一個(gè)非常關(guān)鍵的“行框盒子”。我們需要的其實(shí)并不是這個(gè)“行框盒子”，而是每個(gè)“行框盒子”都會(huì)附帶的一個(gè)產(chǎn)物 —— “幽靈空白節(jié)點(diǎn)”，即一個(gè)寬度為 0，表現(xiàn)如同普通字符的看不見的“節(jié)點(diǎn)”。有了這個(gè)“幽靈空白節(jié)點(diǎn)”，我們的 line-height: 300px; 就有了作用的對(duì)象，從而相當(dāng)于在 .content 元素前面撐起了一個(gè)高度為 300px 的寬度為 0 的行內(nèi)元素。
• 因?yàn)樾袃?nèi)元素默認(rèn)都是基線對(duì)齊的，所以我們通過對(duì) .content 元素設(shè)置 vertical-align: middle; 來(lái)調(diào)整多行文本的垂直位置，從而實(shí)現(xiàn)我們想要的“垂直居中”效果。這種方式也適用于 圖片等替換元素 的垂直居中效果。當(dāng)然這里的“垂直居中”也是近似的，這是由于 vertical-align 導(dǎo)致的，具體為什么可以深入了解 vertical-align: middle;。

塊級(jí)元素

依然先把基礎(chǔ)代碼寫出來(lái)：

<div class="main">    <div class="content">我是要居中的塊級(jí)元素div</div></div>

.main {    width: 300px;    height: 300px;    background-color: #50ba8b;}.content {    width: 150px;    height: 150px;    background-color: #5b4d4e;}

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

position + margin: auto

實(shí)現(xiàn)代碼如下：

.main {    width: 300px;    height: 300px;    background-color: #50ba8b;        /*關(guān)鍵代碼*/    position: relative;}.content {    width: 150px;    height: 150px;    background-color: #5b4d4e;    /*關(guān)鍵代碼*/    position: absolute;    top: 0;    left: 0;    bottom: 0;    right: 0;    margin: auto;}

實(shí)現(xiàn)原理：

1. 設(shè)置 .main 元素為相對(duì)定位 position: relative;，這樣其子元素設(shè)置絕對(duì)定位時(shí)就相對(duì)它了。
2. 然后設(shè)置 .content 元素為絕對(duì)定位 position: absolute; 并設(shè)置它的 top、left、bottom、right 都為0，這樣該元素的元素的尺寸表現(xiàn)為“格式化寬度和格式化高度”，和 <div> 的“正常流寬度”一樣，同屬于外部尺寸，也就是尺寸自動(dòng)填充父級(jí)元素的可用尺寸，但由于此時(shí)我們?cè)O(shè)置了 .content 元素的寬高，就限制了元素自動(dòng)填充，這樣就多出來(lái)150px的空間了。
3. 最后我們?cè)O(shè)置 .content 元素為 margin: auto; ，此時(shí)根據(jù) auto 的計(jì)算規(guī)則，將上下左右剩余空間全部等分了，自然就居中了。

position + margin-left/top

實(shí)現(xiàn)代碼如下：

.main {    width: 300px;    height: 300px;    background-color: #50ba8b;        /*關(guān)鍵代碼*/    position: relative;}.content {    width: 150px;    height: 150px;    background-color: #5b4d4e;    /*關(guān)鍵代碼*/    position: absolute;    top: 50%;    left: 50%;    margin-left: -75px;    margin-top: -75px;}

實(shí)現(xiàn)原理：

1. 設(shè)置 .main 元素為相對(duì)定位 position: relative;，這樣其子元素設(shè)置絕對(duì)定位時(shí)就相對(duì)它了。
2. 然后設(shè)置 .content 元素為絕對(duì)定位 position: absolute; 并設(shè)置 top: 50%;、left: 50%;，這樣.content 元素的左上角就位于 .main 元素的中心了。
3. 最后設(shè)置 .content 元素 margin-left: -75px;、margin-top: -75px; 將自身左移及上移寬高的一半，這樣 .content 元素的中心處于 .main 元素的中心處，自然就實(shí)現(xiàn)了居中效果。
4. 這種方法的缺點(diǎn)就是需要固定 .content 元素的寬高。

position + translate

實(shí)現(xiàn)代碼如下：

.main {    width: 300px;    height: 300px;    background-color: #50ba8b;        /*關(guān)鍵代碼*/    position: relative;}.content {    width: 150px;    height: 150px;    background-color: #5b4d4e;    /*關(guān)鍵代碼*/    position: absolute;    top: 50%;    left: 50%;    transform: translate(-50%, -50%);}

實(shí)現(xiàn)原理：

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

Flexbox

實(shí)現(xiàn)代碼如下：

.main {    width: 300px;    height: 300px;    background-color: #50ba8b;    /*關(guān)鍵代碼*/    display: flex;}.content {    width: 150px;    height: 150px;    background-color: #5b4d4e;    /*關(guān)鍵代碼*/    margin: auto;}

實(shí)現(xiàn)原理：

• 設(shè)置 .main 元素 display: flex;。
• 然后設(shè)置 .content 元素為 margin: auto; 即可實(shí)現(xiàn)居中。
• 這是毋庸置疑的最佳解決方案，我們不需要設(shè)置 .content 元素為絕對(duì)定位，margin: auto 自然就可以作用于寬高，而且我們也不需要設(shè)置 .content 元素的寬高， 因?yàn)镕lexbox(伸縮盒)是專門針對(duì)這類需求所設(shè)計(jì)的。
• 缺點(diǎn)就是目前瀏覽器支持程度相對(duì)其它方式會(huì)低些。

Flexbox 的另一個(gè)好處在于，它還可以將匿名容器(即沒有被標(biāo)簽包裹的文本節(jié)點(diǎn))垂直居中。比如我們不設(shè)置 .main 元素為 display: flex;，而是設(shè)置 .content 元素為 display: flex;，并借助 Flexbox 規(guī)范所引入的 align-items 和 justify-content 屬性，我們可以讓它內(nèi)部的文本也實(shí)現(xiàn)居中（我們可以對(duì).main 元素使用相同的屬性來(lái)使 .content 元素元素居中，但比 margin: auto 方法要更加優(yōu)雅一些，并且同時(shí)起到了回退的作用）。

.content {    width: 150px;    height: 150px;    background-color: #5b4d4e;    /*關(guān)鍵代碼*/    display: flex;    align-items: center;    justify-content: center;    margin: auto;}

以上就是本文的全部?jī)?nèi)容，希望對(duì)大家的學(xué)習(xí)有所幫助，也希望大家多多支持武林網(wǎng)。