水平垂直居中

以往，外层warp定义好宽度和高度，里面的div基于父及warp水平垂直居中显示的话：

warp{
width:300px;
height:100px;
position:relative;
}
div{
width:80px;
height:80px;
position:absoulte;
top:50%;
left:50%;
margin-left:-150px;
marign-top:-50px;
}

这样有个缺陷就是，当warp的宽度或者高度改变的时候，那么margin-left和margin-top的值也要跟着改变，否则就不会水平垂直居中。

那么，还有一种简便的方法：

warp{
width:300px;
height:100px;
position:relative;
}
div{
width:80px;
height:80px;
position:absoulte;
left:0;right：0;
top:0;bottom:0;
margin:auto;
}

这样的话，改变warp的高度和宽度，div始终都是水平垂直居中显示。