盒子垂直居中

2018-02-26

flex position table-cell

position:absolute;
left:50%;
top:50px;
margi-left:-(自身宽度的一半)
margin-top:-(自身高度的一半)

//父级
display:table-cell;
vertical:center;
height:200px;
width:300px;
//子级
margin:0 auto

display:flex;
display:-webkit-flex;
align-items:center;
justify-content:center;

//父亲
position:relative;
width:500px;
height:200px;
//子级
position:absolute;
top:50%;
left:50%;
transform:translate(50%,50%)//注意：这里启用了3D加速，会比较消耗CPU资源