实现垂直居中的六种方法

1.dispaly:inline-block

• 需有参照空元素；
• 例如：空元素为<span></span>，span应和需居中元素（img等）为平级标签，将span设置宽度为0，高度为父容器高度，居中方式为vertical-align：middle；

• 同时将需居中元素设置为vertical-align：middle。

注：为避免部分块状元素拥有默认高度，应给元素添加声明：font-size:0;

2.height:line-height

• 行高=容器高度，可实现单行文本在容器中垂直居中对齐。

注：为避免部分块状元素拥有默认高度，应给元素添加声明：font-size:0;

3.display:table-cell

• 将元素类型转换为<td>标签的元素类型：display:table-cell;
• 无需1方法中的参照元素，直接设置vertical-align:middle即可。

注：为避免部分块状元素拥有默认高度，应给元素添加声明：font-size:0;

4.定位方式1

• 子元素设置position:absolute脱离标准文档流;
• 父元素设置position:relative不脱离标准文档流；
• 其他属性：left:50%;top:50%;margin:-height/2 0 0 -width/2;

5.定位方式2

• 子元素设置position:absolute脱离标准文档流;
• 父元素设置position:relative不脱离标准文档流；
• 其他属性：left:0;top:0;right:0;bottom:0;margin:auto;

6.display:flex

• 将其父元素设置为弹性盒子dispaly:flex；
• 设置主轴对齐方式justify-content:center;
• 设置侧轴对齐方式align-items:center;

拓展：如何将元素在浏览器可视窗口居中？

将4或5方式中的定位方式设置为固定定位即可。position:fixed。