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;