1. 水平居中

1.1 行內或者具有行內元素性質的元素（比如文字或者連結）

使其父元素為塊級元素的行內元素水平居中。

/* css */
.center-children {
    text-align: center;
}
複製程式碼

1.2 單個塊級元素(定寬)

設定塊級元素的 margin-left 和 margin-right 為 auto ，來使其水平居中。
注意：這個塊級元素要有 width 屬性，否則會佔滿寬度，這時候已經不需要居中了。

/* css */
.center-me {
    margin: 0 auto;
}
複製程式碼

1.3 多個塊級元素（聚成一行居中）

方案一：利用display:inline-block; 塊級元素inline-block,父元素text-align:center。

/* css */
.inline-block-center {
  text-align: center;
}
.inline-block-center div {
  display: inline-block;
  text-align: left;
}
複製程式碼

方案二：flex佈局

/* css */
.flex-center {
  display: flex;
  justify-content: center;
}
複製程式碼

1.4 多個塊級元素（在各自行居中）

利用 margin: xxxpx auto;

/* css */
main div {
  margin: 0 auto;
}
複製程式碼

2. 垂直居中

2.1 行內或者具有行內元素性質的元素（比如文字或者連結）

2.1.1 單行

方案一：padding-top === padding-bottom

/* css */
.link {
  padding-top: 30px;
  padding-bottom: 30px;
}
複製程式碼

方案二：line-height === height
若 padding 無效，要使不換行的文字居中有一個技巧，設定文字的 line-height 和 height 的值相等。

/* css */
.center-text-trick {
  height: 100px;
  line-height: 100px;
  white-space: nowrap;
}
複製程式碼

2.1.2 多行

方案一：padding-top === padding-bottom
方案二：table化結合 verticl-align
如果這種方法不奏效的話，可以設定文字所在的元素為一個 table cell（無論它直接是 table 還是用CSS使這個元素表現的像一個 table cell），結合 vertical-align 屬性處理這種情況，它與我們通常所做的在行上處理元素對齊的方式不同：

/* css */
/* table 的情況 */
table {
  background: white;
  width: 240px;
  border-collapse: separate;
  margin: 20px;
  height: 250px;
}
table td {
  background: black;
  color: white;
  padding: 20px;
  border: 10px solid white;
  /* default is vertical-align: middle; */
}
/* display:table 的情況 */
.center-table {
  display: table;
  height: 250px;
  background: white;
  width: 240px;
  margin: 20px;
}
.center-table p {
  display: table-cell;
  margin: 0;
  background: black;
  color: white;
  padding: 20px;
  border: 10px solid white;
  vertical-align: middle;
}
複製程式碼

方案三：flex佈局
注意：父元素height值(px %)固定

/* css */
.flex-center-vertically {
  display: flex;
  justify-content: center;   /* 排列方向變了，所以變成了垂直方向上的水平居中 */
  flex-direction: column;  /* 垂直排列 */
  height: 400px;
}
複製程式碼

方案四：偽元素
原理：讓一個完整高度的偽元素放置在容器內，並與文字垂直對齊。

/* css */
.ghost-center {
  position: relative;
}
.ghost-center::before {
  content: " ";
  display: inline-block;
  height: 100%;
  width: 1%;
  vertical-align: middle;
}
.ghost-center p {
  display: inline-block;
  vertical-align: middle;
}
複製程式碼

2.2 塊級元素

2.2.1 元素高度確定

絕頂定位+百分比+負margin

/* css */
.parent {
  position: relative;
}
.child {
  position: absolute;
  top: 50%;
  height: 100px;
  margin-top: -50px; /* 考慮padding 和 border 如果不使用box-sizing: border-box; */
}
複製程式碼

2.2.2 元素高度不確定

不知道元素的高度是比較常見的，有很多原因：如果寬度改變，文字回流會改變高度；文字樣式改變會改變高度；文字數量改變會改變高度；一個固定比例的元素，比如圖片，當重置尺寸的時候也會改變高度，等等。
方案一：絕對定位+百分比+transform

/* css */
.parent {
  position: relative;
}
.child {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
}
複製程式碼

2.2.3 flex佈局（通用）

/* css */
.parent {
  display: flex;
  flex-direction: column;
  justify-content: center;
}
複製程式碼

3. 垂直水平居中

3.1 元素有固定的寬和高

絕對定位+百分比+負margin組合

/* css */
.parent {
  position: relative;
}
.child {
  width: 300px;
  height: 100px;
  padding: 20px;
  position: absolute;
  top: 50%;
  left: 50%;
  margin: -70px 0 0 -170px;  /* 感覺好傻，直接用下面的百分比方法也可以 */
}
複製程式碼

3.2 元素的寬和高未知

方案一：絕對定位+百分比+transform組合

/* css */
.parent {
  position: relative;
}
.child {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}
複製程式碼

3.3 flex佈局（通用）

/* css */
.parent {
  display: flex;
  justify-content: center;
  align-items: center;
}
複製程式碼

3.4 grid佈局（通用）

/* css */
body, html {
  height: 100%;
  display: grid;
}
span { /* thing to center */
  margin: auto;
}
複製程式碼

4. 參考連結

https://css-tricks.com/centering-css-complete-guide/
https://juejin.im/entry/583b954b61ff4b006b55b43d
http://www.cnblogs.com/chaixiaozhi/p/8490725.html

css居中方案彙總