常见的水平垂直居中

水平居中——
*行内元素：*text-align:center
*块级元素：*margin:0 auto
*伸缩盒：*display: flex;
justify-content: center;
CSS3中新增的transform属性：
position:absolute;
left:50%;
transform:translate(-50%,0);
绝对定位：
（1）left：50%；magin-left:left宽度的一半
（2）left:0;right:0;margin:0 auto;

垂直居中——
*单行文本：*line-height=父元素的高度
*行内块级：*display：inline-block，vertical-align：middle，content：“”；
定位：父元素相对定位，子元素绝对定位：
top:50%;
height:固定;
margin-top:-0.5高度;
垂直水平居中——
子绝父相：
子——{
position: absolute;
width: 50%;
height: 50%;
top: 0;
left: 0;
bottom: 0;
right: 0;
margin: auto;
}
父——position: relative;