1.Horizontally 水平居中

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

给需要居中元素一个block父元素,需要居中的子元素为文本或inline，inline-blck,inline-table,inline-flex

核心代码

.parent { text-align: center; }

`inline`元素水平居中
inline或inline-*元素水平居中JSbin演示

1.2block元素水平居中

父元素为block元素子元素也为block元素，且子元素设置了宽度。
方法：子元素margin： 0 auto,左右外边距自动填充。
核心代码

.child { margin: 0 auto;}

效果

`block`元素水平居中
block元素水平居中JSbin演示

1.3多个block元素水平居中

1.3.1多个block元素一行排列水平居中

方法一：利用inline-block,原理将子元素转化为inline-block，父元素text-align: center;
方法二：利用display:flex;注意子元素高度会保持一致
核心代码

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

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

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

效果如下

多个`block`元素一行排列水平居中

多个block元素水平居中

1.3.2多个block元素每行一个水平居中

因为每个block元素独占一行，所以方法是margin: 0 auto
效果如下

多个`block`元素每行一个水平居中
多个block元素每行一个水平居中JSbin演示

2.Vertically垂直居中

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

需要垂直居中的元素为单行的inline 或 inline-*元素,例如一个text或者a链接(包括a链接变化而成的按钮)

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

上下左右使用相同的padding可以不用设置宽高，既可以在修改文本内容时自适应，又可以减少出现BUG的几率
核心代码

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

效果如下

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

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

2.1.1方法二：设置 line-height 与高度相同

核心代码

main a {
  height: 100px;
  line-height: 100px;
  white-space: nowrap;
  /*nowrap文本内的换行无效,内容只能在一行显示*/
}

效果如下

设置 `line-height`与高度相同

设置 line-height 与高度相同JSbin演示

2.2多行文本垂直居中

多行文本使用增加上下padding垂直居中的方法仍然有效且良好,不需设置宽高,推荐使用.
如果这样做不起作用，那么文本所在的元素可能是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布局多行文本垂直居中

一个flex-child可以简单地在flex-parent的中心.（注意设置高度）
核心代码

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

效果如下

使用flex布局多行文本居中

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

2.3 block 元素垂直居中

2.3.1 已知 block 元素高度

原理是绝对定位， top: 50%; 然后 margin-top 设置为负边距且值为高度的一半
核心代码

.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;绝对定位会使元素脱离文档流
效果如下

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

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

借助CSS3中的transform属性向Y轴反向偏移50%的方法实现垂直居中。但是部分浏览器存在兼容性的问题。

核心代码:

.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有固定宽高的元素

核心代码：
依旧是绝对定位+宽高一半的负边距

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

效果如下

有固定宽高的元素

有固定宽高的元素JSbin演示

3.2宽高不固定的元素

利用2D变换，在水平和垂直两个方向都向反向平移宽高的一半，从而使元素水平垂直居中。
核心代码

.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

本文引用归原作者所有