1.Horizontally 水平居中

1.1inline或inline-*元素水平居中

給需要居中元素一個(gè)block父元素,需要居中的子元素為文本或inline，inline-blck,inline-table,inline-flex

核心代碼

.parent { text-align: center; }

`inline`元素水平居中

1.2block元素水平居中

父元素為block元素子元素也為block元素，且子元素設(shè)置了寬度。
方法：子元素margin： 0 auto,左右外邊距自動(dòng)填充。
核心代碼

.child { margin: 0 auto;}

效果

`block`元素水平居中

1.3多個(gè)block元素水平居中

1.3.1多個(gè)block元素一行排列水平居中

方法一：利用inline-block,原理將子元素轉(zhuǎn)化為inline-block，父元素text-align: center;
方法二：利用display:flex;注意子元素高度會(huì)保持一致
核心代碼

.inline-block-center{
  text-align: center;
}

.inline-block-center div{
  display: inline-block;
}

.flex-center{
  display: flex;
  justify-content: center;
}

效果如下

多個(gè)`block`元素一行排列水平居中

多個(gè)block元素水平居中

1.3.2多個(gè)block元素每行一個(gè)水平居中

因?yàn)槊總€(gè)block元素獨(dú)占一行，所以方法是margin: 0 auto
效果如下

多個(gè)`block`元素每行一個(gè)水平居中

2.Vertically垂直居中

2.1inline 或 inline-*元素單行垂直居中

需要垂直居中的元素為單行的inline 或 inline-*元素,例如一個(gè)text或者a鏈接(包括a鏈接變化而成的按鈕)

2.1.1方法一：上下使用相同的padding（推薦）

上下左右使用相同的padding可以不用設(shè)置寬高，既可以在修改文本內(nèi)容時(shí)自適應(yīng)，又可以減少出現(xiàn)BUG的幾率
核心代碼

main a {
  padding-top: 40px;
  padding-bottom: 40px;
}

效果如下

`inline` 或 `inline-*`元素單行垂直居中

方法一：上下使用相同的padding

2.1.1方法二：設(shè)置 line-height 與高度相同

核心代碼

main a {
  height: 100px;
  line-height: 100px;
  white-space: nowrap;
  /*nowrap文本內(nèi)的換行無效,內(nèi)容只能在一行顯示*/
}

效果如下

設(shè)置 `line-height`與高度相同

設(shè)置 line-height 與高度相同JSbin演示

2.2多行文本垂直居中

多行文本使用增加上下padding垂直居中的方法仍然有效且良好,不需設(shè)置寬高,推薦使用.
如果這樣做不起作用，那么文本所在的元素可能是table或者table-cell元素，無論是真正的table還是后期自己添加的CSS.
下面說說這兩種情況使用其他方法的垂直居中.

2.2.1方法一：display: table; 和 vertical-align: middle;

核心代碼

.center-table{
  display: table;
}

.center-table p{
  display: table-cell;
  vertical-align: middle;
}

效果如下

多行文本垂直居中

table + vertical-align: middle;多行文本垂直居中JSbin演示

2.2.2方法二：使用flex布局多行文本垂直居中

一個(gè)flex-child可以簡單地在flex-parent的中心.（注意設(shè)置高度）
核心代碼

.flexParent{
  display: flex;
  flex-direction: column;
  justify-content: center;
  height: 200px;
}

效果如下

使用flex布局多行文本居中

使用 flex 布局多行文本居中JSbin演示

2.3 block 元素垂直居中

2.3.1 已知 block 元素高度

原理是絕對(duì)定位， top: 50%; 然后 margin-top 設(shè)置為負(fù)邊距且值為高度的一半
核心代碼

.parent {
  position: relative;
}
.child {
  position: absolute;
  top: 50%;
  height: 100px;
  margin-top: -50px; /* account for padding and border if not using box-sizing: border-box; */
}

注意:使用 position: absolute;絕對(duì)定位會(huì)使元素脫離文檔流
效果如下

已知`block`元素高度垂直居中

2.3.2 block元素高度未知垂直居中

借助CSS3中的transform屬性向Y軸反向偏移50%的方法實(shí)現(xiàn)垂直居中。但是部分瀏覽器存在兼容性的問題。

核心代碼:

.parent {
  position: relative;
}
.child {
  position: absolute;
  top: 50%;
  height: 100px;
  transform: translateY(-50%);
}

效果如下

`block`元素高度未知垂直居中

block元素高度未知垂直居中JSbin演示

2.3.3 使用flex布局block元素高度未知垂直居中

核心代碼

.parent{
    display: flex;
    flex-direction: column;
    justify-content: center;
}

效果如下

使用flex布局`block`元素高度未知垂直居中

使用flex布局 block 元素高度未知垂直居中JSbin演示

3.Both Horizontally and Vertically水平垂直居中

3.1有固定寬高的元素

核心代碼：
依舊是絕對(duì)定位+寬高一半的負(fù)邊距

.parent{
  position: relative;
}
.child{
  width: 200px;
  height: 100px;
  padding: 20px;
  position: absolute;
  top: 50%;
  left: 50%;
  margin: -70px 0 0 -120px; /*寬高的一半+padding+border負(fù)值*/
}

效果如下

有固定寬高的元素

有固定寬高的元素JSbin演示

3.2寬高不固定的元素

利用2D變換，在水平和垂直兩個(gè)方向都向反向平移寬高的一半，從而使元素水平垂直居中。
核心代碼

.parent{
  position: relative;
}
.child{
  top: 50%;
  left: 50%;
  transform: translate(-50%,-50%);
}

效果如下

寬高不固定

寬高不固定水平垂直居中JSbin演示

3.3 使用flex布局垂直水平居中

核心代碼:

.parent{
  display: flex;
  justify-content: center;
  align-items: center;
}

效果如下

寬高不定flex布局

flex布局水平垂直居中JSbin演示

3.4使用grid布局垂直水平居中

核心代碼

 body, html {
  height: 100%;
  display: grid;
}

span{
  margin: auto;
}

效果如下

grid布局水平垂直居中

grid布局水平垂直居中JSbin演示

參考演示：https://css-tricks.com/centering-css-complete-guide/#center

本文引用歸原作者所有