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%)