垂直居中的方法

* {
line-height: 60px;

line-height 行高的属性

line表示字体样式的行高属性，即行级元素占用的高度，这个属性主要是用于字体居中使用的，一般情况下，父级高度为多少，那么行高就设置为多少

height: 60px;
text-align: center;
vertical-align: middle;

}

水平垂直居中包含两个初始条件：父元素为块级元素，高度宽度已设定好。

子元素为行内元素，单行

水平居中：将父元素设置为text-align：center

垂直居中：设置父元素line-height值与height值相同

或者将子元素设置为display：inline-block,按块级元素方法进行水平垂直居中。

子元素为多行文本

设置为inline-block

子元素为图片

垂直居中：父元素用行高替代高度，字体大小设置为0,

子元素设置vertical-align:middle

子元素为块级元素，宽、高度未设定

水平居中：块级子元素宽度会与父元素相同

行内块级元素：利用浮动的包裹性和百分比相对定位

为子元素外面再加上一层div，

将其设置为：float：left

position：relative

left：50%

将子元素设置为：position：relative

left:-50%

垂直居中：a.父元素设置display：table-cell

vertial-align：middle

b.父元素设置display：flex

align-items：center

子元素为块级元素，宽、高已设定

水平居中：a.子元素设置：margin：0 auto

b.计算父元素的padding值设置居中

c.计算子元素的margin值设置居中

d.绝对定位

父元素：position：relative

子元素：position：absolute

left：50%

然后调整子元素回退一半宽度即可：

a.margin-left：-50%

b.transform:translateX(-50%);

e.flex布局

父元素设置display：flex

justify-content：center

垂直居中：

a.计算父元素的padding值设置居中

b.计算子元素的margin值设置居中

c.绝对定位

父元素：position：relative

子元素：position：absolute

left：50%

然后调整子元素回退一半宽度即可：

a.margin-left：-50%

b.transform:translateX(-50%);

d.flex布局

父元素设置display：flex

align-items：center

e.父元素设置display：table-cell

vertial-align：middle