HTML 居中总结

一.水平居中

1.display:inline-block;

这个方法是把容器先转为行内块级，然后用text-align:center；来让内容相对于其父元素水平居中。

2.margin：0 auto；

这个方法是针对块级元素的。

3.父级元素设置position：relative；子元素position：absolute；

子元素设置top：50%；height：20px；margin-top：-10px；

二.垂直居中

1.vertical-align

适用于内联元素（以及被转化为内联元素的块元素），或者display设置为table-cell的元素，在 firefox 和 ie8 下，可以设置块级元素的 display 值为 table-cell，来激活 vertical-align 属性，显示效果和就和表格中的 valign="center" 一样了。但 ie6,7 并不支持。

2.height加line-height

针对块级元素内的内容垂直居中，设置height=line-height的高度可以达到目的。

3.等同于水平居中的第三个方法。

三.table

设置父元素的display为table，设置子元素的display为table-cell。子元素再加上vertical-align:middle;text-align:center;。

作者：weberZhou
链接：https://www.jianshu.com/p/d06f091d6a4d