居中布局的几种方式

水平居中

利用display:table

.box{
display:table;
margin:0 auto;
}

利用display:flex

.boxParent{
display:flex;
}
.box{
margin:auto;
}

水平竖直都居中

已知元素的宽高

.box{
position:absolution;
left:50%;
top:50%;
margin-top:-1/2Height;
margin-left:-1/2Width;
}

不知元素的宽高

.box{
position:absolution;
left:0;
right:0;
top:0;
bottom:0;
margin:auto;
}