CSS实现垂直水平居中

1、父级元素设置 text-align：center，然后设置 line-height 和 vertical-align 使其垂直居中，

最后设置 font-size：0 消除近似居中的 bug

2、父级元素设置 display：table-cell，vertical-align：middle 达到水平垂直居中

3、采用绝对定位，原理是子绝父相，父元素设置 position：relative，子元素设置 position：

absolute，然后通过 transform 或 margin 组合使用达到垂直居中效果，设置 top：50%，

left： 50%，transform：translate（-50%，-50%）

4、绝对居中，原理是当 top,bottom 为 0 时，margin-top&bottom 设置 auto 的话会无限延

伸沾满空间并平分，当 left，right 为 0 时,margin-left&right 设置 auto 会无限延伸占满空

间并平分，

5、采用 flex，父元素设置 display：flex，子元素设置 margin：auto

6、视窗居中，vh 为视口单位，50vh 即是视口高度的 50/100，设置 margin：50vh auto 0，

transform：translate(-50%)