块级元素垂直居中

通常使用的垂直居中方法：

<style>
div{
    width:100px;
    height:100px;
    top:50%;
    left:50%;
    margin-left:-50px;
    margin-top:-50px;
    position:absolute;
    text-align:center;
    inline-height:100px;
}
</style>

这种方法不方便的地方是一旦块级元素的宽高度变了后，需要随之改变margin的值，

所以使用translate进行优化：

<style>
 div{
   width:100px;
    height:100px;
     top:50%;
     left:50%;
    transform：translate(-50%,-50%);
    -webkit-transform:translate(-50%,-50%);
    -o-transform:translate(-50%,-50%);
     -ms-transform:translate(-50%,-50%);
     position:absolute;
     text-align:center;
     inline-height:100px;
 }
</style>

这样无论块级元素宽高如何变，都可以保证垂直居中。