块级元素垂直居中

Posted 2020-09-13 水流目

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

 1 <style>
 2 div{
 3     width:100px;
 4     height:100px;
 5     top:50%;
 6     left:50%;
 7     margin-left:-50px;
 8     margin-top:-50px;
 9     position:absolute;
10     text-align:center;
11     inline-height:100px;
12 }
13 </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>

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