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

DIV水平和垂直居中问题

时间:2015-08-26 20:13:30      阅读:127      评论:0      收藏:0      [点我收藏+]

标签:

1.div水平居中

.className{   
    width:270px;   
    height:150px;   
    margin:0 auto;   
}  

2.div垂直居中

.className{   
    width:270px;   
    height:150px;   
    position:absolute;   
    left:50%;   
    top:50%;   
    margin:-75px 0 0 -135px;   
} 

将层设置为绝对定位,left和top为50%,这时候使用负外边距,负外边距的大小为宽高的一半。


3.适用jquery

$(document).ready(function(){      
                                
$(window).resize(function(){      
       
  $('.className').css({      
   position:'absolute',      
   left: ($(window).width()       
     - $('.className').outerWidth())/2,      
   top: ($(window).height()      
     - $('.className').outerHeight())/2      
  });      
             
 });     



版权声明:本文为博主原创文章,未经博主允许不得转载。

DIV水平和垂直居中问题

标签:

原文地址:http://blog.csdn.net/yangmingxing980/article/details/48008377

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