CSS之各類居中

前言

在我看來，入門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完成各類狀況的居中。若是讀者以爲有補充或者哪一個地方講述錯誤，歡迎指正。