前言

在 CSS 中，元素的水平/垂直居中一直是程序員高頻接觸的東西，實(shí)現(xiàn)的方法也多種多樣，這里將相關(guān)方法收集于此，自己再實(shí)現(xiàn)下代碼加深記憶。不想看具體實(shí)現(xiàn)可以直接跳到 「總結(jié)」部分。

水平居中

需考慮要居中的元素是 行內(nèi)元素（如：span，i）還是塊級元素（如：div，p）。

行內(nèi)元素

在需要居中元素的父容器上寫text-align: center;即可。

<!-- HTML -->
<div class="parent">
  <span class="child">內(nèi)容區(qū)</span>
</div>

/* CSS */
.parent{
  text-align: center;
}

塊級元素

給需要居中的元素一個顯式的寬度，再margin-left: auto;，margin-right: auto; 。

<!-- HTML -->
<div class="parent">
  <div class="child">內(nèi)容區(qū)</div>
</div>

/* CSS */
.child{
  width: 100px;
  margin-left: auto;
  margin-right: auto;
}

垂直居中

當(dāng).parent的高度沒有固定時，.child使用padding: 10px 0;就能實(shí)現(xiàn)居中，當(dāng).parent的高度固定時則需要使用以下方式進(jìn)行居中，建議開發(fā)時.parent的高度能不固定就不固定。

先放通用代碼，后面具體實(shí)現(xiàn)時就不再貼出來了。

<!-- HTML -->
<div class="parent">
  <div class="child">內(nèi)容區(qū)</div>
</div>

/* CSS */
.parent{
  height: 200px;
  border: 1px solid red;
}
.parent{
  width: 50px;
  height: 50px;
  border: 1px solid blue;
}

1. absolute + margin auto

/* CSS */
.parent{
  position: relative;
}
.child{
  position: absolute;
  margin: auto;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
}

2. absolute + margin-top

使用margin-top: -50%;， 這里的-50%是指.child自身高度的一半。

/* CSS */
.parent{
  position: relative;
}
.child{
  position: absolute;
  top: 50%;
  margin-top: -25px;
}

3. absolute + transform

這個方法需要考慮transform的兼容性。

/* CSS */
.parent{
  position: relative;
}
.child{
  position: absolute;
  top: 50%;
  // 在實(shí)際項(xiàng)目中我們常常使用 translate(-50%, -50%) 實(shí)現(xiàn)水平和垂直居中
  transform: translateY(-50%);
}

4. table

布局改為table實(shí)現(xiàn)就能實(shí)現(xiàn)垂直居中。

<!-- HTML -->
<table class="parent">
  <tr>
     <td class="child">內(nèi)容區(qū)</td>
  </tr>
</table>

5. div 實(shí)現(xiàn) table

/* CSS */
.parent{
  display: table-cell;
  vertical-align:middle;
}

還有一種復(fù)雜版：

<!-- HTML -->
<div class="parent">
  <div class="parent-inner">
    <div class="child">內(nèi)容區(qū)</div>
  </div>
</div>

/* CSS */
.parent{
  display: table;
}
.parent-inner{
  display: table-cell;
  vertical-align:middle;
}

6. line-height

設(shè)置line-height屬性實(shí)現(xiàn)垂直居中，不推薦在項(xiàng)目中使用（有其他這么些方法不用，非要用這個？）

/* CSS */
.child{
  line-height: 200px; // 父容器的高度
}

7. flex

強(qiáng)烈推薦flex，如絲般順滑的實(shí)現(xiàn)水平垂直居中。

/* CSS */
.parent{
  display: flex;
  align-items: center; //交叉軸（cross axis）如何對齊
}

8. grid

同 flex 一樣也是一種布局方式。

/* CSS */
.parent{
  display: grid;
}

.child{
  align-self:center; 
}

總結(jié)

關(guān)于水平居中寫得很少，其實(shí)很多垂直居中里的方法將應(yīng)用于 y 軸的操作應(yīng)用于 x 軸就能實(shí)現(xiàn)水平居中，實(shí)際項(xiàng)目選擇適合的方法就好。

水平居中：

行內(nèi)元素：父容器text-align: center即可。

塊級元素：給需要居中的元素一個顯式的寬度，再margin-left: auto;，margin-right: auto; 。

垂直居中:

父容器高度不固定，子元素設(shè)置相同的padding-top和padding-bottom值就可實(shí)現(xiàn)垂直居中。

父容器高度固定:

1. absolute + margin auto
2. absolute + margin-top
3. absolute + transform
4. table
5. div 實(shí)現(xiàn) table
6. line-height
7. flex
8. grid

參考資料

七種方式實(shí)現(xiàn)垂直居中 - 饑人谷

CSS【日常處理總結(jié)】- GitHub

六種實(shí)現(xiàn)元素水平居中 - w3cplus