1. div{
height:200px;width:200px;
position:absolute;
top:50%;
left:50%;
margin-left: -100px;
margin-top: -100px;
}
原理： left:50%会使盒子出现在屏幕中线右边，然后让margin-left:-负盒子宽度的一半 使盒子刚好往左移一半，达到刚好水平居中的效果。top:50%垂直居中同理。
2. div{
height:200px;width:200px;
position:absolute;
top:50%;
left:50%;
transform: translate(-50%,-50%)
}
原理 同1。使用transform属性使盒子往中心线拉一半。
3. div{
height:200px;width:200px;
position:absolute;
top:0；
left:0；
margin:auto;