码迷,mamicode.com
首页 > 其他好文 > 详细

块级元素垂直居中

时间:2017-04-24 15:44:31      阅读:204      评论:0      收藏:0      [点我收藏+]

标签:使用   style   idt   for   高度   pre   center   logs   nsf   

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

 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>

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

块级元素垂直居中

标签:使用   style   idt   for   高度   pre   center   logs   nsf   

原文地址:http://www.cnblogs.com/Bideam/p/6757112.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!