元素居中

水平居中

行内元素居中：text-align：center
块级元素居中：设置宽度，左右margin：auto;

垂直居中

• 居中vs不居中
  上下padding相等
• 绝对定位实现居中

.center{
position:absolute;
left:50%;
right:50%;
margin-left:-(宽度的一半);   /*前提是宽高固定*/
margin-top:-(高度的一半);
transform:translate(-50%,-50%); /*不限制宽高，css3属性*/
}

• vertical-align

.box::before{
content:'';
display:inline-block;
height:100%;
vertical-align:middle;
}/*父容器伪元素设定基线*/
.box img{
vertical-align:middle;
}/*需要居中的元素*/

• table-cell实现居中

.box{
display:table-cell;
vertical-align:middle;
text-align:center;
}/*父容器设置*/

• flex实现居中