腳本之家服務(wù)器常用軟件

快捷導(dǎo)航

CSS實現(xiàn)元素居中原理解析

發(fā)布時間：2018-10-18 15:49:10 作者：laixiangran

我要評論

在 CSS 中要設(shè)置元素水平垂直居中是一個非常常見的需求了。這篇文章主要介紹了CSS實現(xiàn)元素居中原理解析，本文分別從行內(nèi)元素和塊級元素進(jìn)行說明，具有一定的參考價值，感興趣的小伙伴們可以參考一下

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

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

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

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

行內(nèi)元素

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

<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 包裹這一個 class 為 .content 的行內(nèi)元素 span，我們的目的就是要讓 .content 元素在 .main 元素中居中。

水平居中

text-align

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

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

實現(xiàn)原理：設(shè)置 text-align 的值為 center ，因為該屬性規(guī)定元素中的文本的水平對齊方式，那么設(shè)置為 center 則文本就水平居中了。

垂直居中

line-height

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

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

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

    line-height: 300px; /* 垂直居中 */
}

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

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

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

line-height 及 vertical-align

下面再來說說多行或者圖片等替換元素的垂直居中效果實現(xiàn)，這里我們需要同時借助 line-height 和 vertical-align 來實現(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;
}

實現(xiàn)原理：

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

塊級元素

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

<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

實現(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;
}

實現(xiàn)原理：

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

position + margin-left/top

實現(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;
}

實現(xiàn)原理：

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

position + translate

實現(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%);
}

實現(xiàn)原理：

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

Flexbox

實現(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;
}

實現(xiàn)原理：

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

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

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

    /*關(guān)鍵代碼*/
    display: flex;
    align-items: center;
    justify-content: center;
    margin: auto;
}

以上就是本文的全部內(nèi)容，希望對大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。