css的水平垂直居中

 

水平居中

行内元素: text-align: center，通用于文本居中

块级元素: margin: 0 auto，通用盒子居中

position:absolute +left:50%+ transform:translateX(-50%)，css定位居中

display:flex;justify-content: center;,css3居中

垂直居中

设置line-height ，设置行高，通用于文本垂直居中

position：absolute +top:50%+ transform:translateY(-50%)，css定位垂直居中

display:flex;align-items: center，css定位居中

display:table;display:table-cell;vertical-align: middle;，将盒子转成表格，通过表格控制垂直居中