前言

在我看來，入門CSS的路上最煩人的就是CSS的各種居中了。在我初學(xué)CSS過程中，居中這個問題經(jīng)常困擾到我。那為什么CSS的居中這么煩人呢？ 我認(rèn)為，這是因?yàn)镃SS的居中方法以及它的適用范圍太多了，而導(dǎo)致應(yīng)用時很難分清到底哪個有效。下面我就簡單地梳理一下CSS的居中方法。

水平居中

1.行內(nèi)元素的水平居中

對于行內(nèi)元素（如text、link或inline-*元素）的水平居中：

.inline {text-align: center; } 復(fù)制代碼

這種方法對于inline-block、inline-table等等都有效。

2.塊級元素的水平居中

對于塊級元素（如div、p等）的水平居中：

.block {margin: 0 auto; } 復(fù)制代碼

這種方法就是把margin-left和margin-right設(shè)置成auto。但這種方法前提是你要設(shè)置好塊級元素的寬度，否則它的寬度就會鋪滿其父級元素。

3.多個塊級元素的水平居中

當(dāng)需要多個塊級元素在一行內(nèi)居中時，我們可以把它們設(shè)置為inline-block或者flex。

1）inline-block

.inline-block-center {display: inline-block;text-align: right; } 復(fù)制代碼

2）flexbox

.flex-center {display: flex;justify-content: center; } 復(fù)制代碼

垂直居中

垂直居中比水平居中要更加復(fù)雜，下面我會按照思考的過程來逐步梳理垂直居中的方法（包括不可行的方法）：

1）

既然塊級元素的水平居中可以使用margin: 0 auto，那么垂直居中能不能用margin: auto 0呢？不能。因?yàn)閙argin-top如設(shè)為auto，默認(rèn)值為0。

2）

OK，那我手動利用calc指定margin-top

margin-top: calc(50%-50px); 復(fù)制代碼

這樣總行了吧？不行。因?yàn)閙argin-top的百分比竟然是以父元素的寬度為參照。

3)

好吧，那我用relative吧：

position: relative; top: calc(50%-50px); 復(fù)制代碼

這次總歸行了。但是這種方法缺點(diǎn)就是元素的高度不能變。

4）

對于inline-element和table-cell，垂直居中同樣可以使用vertical-align:

display: table-cell; vertical-align: middle; 復(fù)制代碼

但這時由于table-cell是inline，寬度將會變成和子元素一樣，而當(dāng)強(qiáng)制指定width為100%時，子元素高度會變成和父元素一樣。

5）

使用偽元素：

<div class="box"><span>垂直居中</span> </div> 復(fù)制代碼.box {width: 400px;height: 300px;border:1px solid red;text-align:center; }.box:before {content:'';display:inline-block;height: 100%;vertical-align:middle; }.box span {vertical-align:middle; } 復(fù)制代碼

這種方法的前提是要是行內(nèi)元素才能進(jìn)行居中。 那為什么添加偽元素在這里會有效呢？ 根據(jù)W3C標(biāo)準(zhǔn)對vertical-align的定義是：該屬性會影響由一個行內(nèi)級元素生成的盒的行框內(nèi)部的垂直定位。

那么偽元素在這里就是生成了一個空的100%高度的行內(nèi)盒，然后行內(nèi)元素以這個行內(nèi)盒為基線進(jìn)行垂直居中。

6)

使用flex布局：

.container {display: flex;flex-direction: column;justify-content: center; } 復(fù)制代碼

水平垂直居中

關(guān)于水平垂直居中，方法也有很多，很繁瑣。有些可以把水平居中的方法和垂直居中的方法結(jié)合（例如添加偽元素方法的text-align + vertical-align）,在這里我就不一一介紹，只是介紹一種最好的方法——幾乎萬能的flex布局：

.container {display: flex;justify-content: center; align-items: center; } 復(fù)制代碼

justify-content影響flex-item在主軸上的位置；而align-item則會影響flex-item在交叉軸上的位置。

結(jié)語

以上的方法基本上可以用CSS完成各種情況的居中。如果讀者覺得有補(bǔ)充或者哪個地方講述錯誤，歡迎指正。

轉(zhuǎn)載于:https://juejin.im/post/5a8050495188257a6a78ca1d

總結(jié)

以上是生活随笔為你收集整理的CSS之各种居中的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯，歡迎將生活随笔推薦給好友。