一 水平居中

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;

}