前言

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

水平居中

1.行內元素的水平居中

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

.inline {text-align: center; } 復制代碼

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

2.塊級元素的水平居中

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

.block {margin: 0 auto; } 復制代碼

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

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

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

1）inline-block

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

2）flexbox

.flex-center {display: flex;justify-content: 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）

使用偽元素：

<div class="box"><span>垂直居中</span> </div> 復制代碼.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; } 復制代碼

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

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

6)

使用flex布局：

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

水平垂直居中

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

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

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

結語

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

轉載于:https://juejin.im/post/5a8050495188257a6a78ca1d

總結

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

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。