一 水平居中

1 行内元素水平居中

行内元素一般是文本，图标等，text-align可以控制其相对于父元素水平居中对齐

#parent{text-align: center;
}

2 margin 自动水平居中

单个块级元素，可以使用margin auto可自动左右对齐，不过要首先设定宽度

#son{width: 100px; /*必须定宽*/margin: 0 auto;
}

另外还可以通过设置父子宽度，使用具体的margin绝对定位对齐

3 块级改行内块级水平居中

多个块级元素时，父元素使用text-align居中对齐，子元素使用inline-block改为行内块级元素即可

#parent{text-align: center;
}
.son{display: inline-block; /*改为行内或者行内块级形式，以达到text-align对其生效*/
}

4 flex布局水平居中对齐

flex布局中主轴为横轴，交叉轴为数轴，在父元素调整子元素沿主轴居中对齐，即可让子元素水平居中对齐

#parent{display: flex;justify-content: center;
}

二 垂直居中

1 line-height垂直居中

可以通过设置height和line-height一致，使元素垂直居中对齐。height为该元素自身的高度，比如div img等的元素高度；line-height为行高的意思，绝定了元素中文本内容的高度。
line-height 可以通过百分比设置行高，以下为默认和70% 200%的效果。

height>line-height时，元素会偏向上，
height<line-height时，元素会偏向下，
height = line-height时，正好垂直居中。

#parent{height: 150px;line-height: 150px;  /*与height等值*/
}

可用于单行元素和多行元素

2 vertical-align垂直居中

针对行内元素和图片，进行垂直居中

#son{vertical-align: middle;
}

3 flex垂直居中

3.1 父元素设置flex，使用align-items让子元素沿交叉轴对齐，即垂直居中

#parent{display: flex;align-items: center;
}

3.2 子元素调整自己的位置，垂直居中对齐

#parent{display: flex;}
#son{align-self: center;}

3.3 margin auto的方法在flex布局平方自动平分剩余空间，达到垂直居中的效果

#parent{display: flex;}
#son{margin: auto 0;}

三 水平垂直居中

1 最好用最容易理解功能最强的还是flex布局

#parent{display: flex;
}
#son{margin: auto;
}或#parent{display: flex;justify-content: center;  //水平居中，沿主轴方向，主轴横向align-items: center;  //垂直居中，沿垂直主轴方向
}或#parent{display: flex;justify-content: center;
}
#son{align-self: center;
}

2 父相子绝

.far{position: relative;    //父元素允许相对定位
}

子元素有三种写法：

2.1 要知道子元素宽高，利用宽高一半偏移

.box{width: 100px;height: 50px;position: absolute;
}

2.2 不知道子元素宽高元素，transform偏移，但注意会影响其他元素的fixed定位等问题

.box{position: absolute;left:50%;top:50%;transform:translate(-50%,-50%);
}

2.2 不知道子元素宽高元素,margin:auto
.box{
position: absolute;
left:0;
top:0;
right:0;
bottom:0;
margin:auto;
}