CSS之各種居中

在我看來，入門css的路上最煩人的就是css的各種居中了。在我初學css過程中，居中這個問題經常困擾到我。那為什麼css的居中這麼煩人呢？我認為，這是因為css的居中方法以及它的適用範圍太多了，而導致應用時很難分清到底哪個有效。下面我就簡單地梳理一下css的居中方法。

對於行內元素（如text、link或inline-*元素）的水平居中：

.inline

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

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

.block

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

當需要多個塊級元素在一行內居中時，我們可以把它們設定為inline-block或者flex。

1）inline-block

.inline-block-center

2）flexbox

.flex-center

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

1）既然塊級元素的水平居中可以使用margin: 0 auto，那麼垂直居中能不能用margin: auto 0呢？不能。因為margin-top如設為auto，預設值為0。

2）ok，那我手動利用calc指定margin-top

margin-top: calc(50%-50px);

這樣總行了吧？不行。因為margin-top的百分比竟然是以父元素的寬度為參照。

3)好吧，那我用relative吧：

position: relative;
top: calc(50%-50px);

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

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

display: table-cell;
vertical-align: middle;

但這時由於table-cell是inline，寬度將會變成和子元素一樣，而當強制指定width為100%時，子元素高度會變成和父元素一樣。

5）使用偽元素：

垂直居中

.box .box:before

.box span

這種方法的前提是要是行內元素才能進行居中。

那為什麼新增偽元素在這裡會有效呢？根據w3c標準對vertical-align的定義是：該屬性會影響由乙個行內級元素生成的盒的行框內部的垂直定位。

那麼偽元素在這裡就是生成了乙個空的100%高度的行內盒，然後行內元素以這個行內盒為基線進行垂直居中。

6)使用flex布局：

.container

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

.container

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

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