元素水平垂直居中【css笔记】

如何让元素相对于body水平和垂直居中

①水平居中：必须设置了div的宽度，然后使用margin设置边距0 auto;

div{   
  　margin:0 auto;   
   width:300px;   
   height:200px;   
}  

②水平和垂直居中：必需设置div得宽度和高度，然后设置位置为绝对定位，距离页面窗口左边框和上边框的距离设置为50%，这个50%就是指页面窗口的宽度和高度的50%，最后将该div分别左移和上移，左移和上移的大小就是该div宽度和高度的一半。

div{ 
   width:300px;  
   height:200px;  
   position:absolute;  
   left:50%;  
   top:50%;  
   margin: -100px 0 0 -150px; 
} 

③jQuery实现水平和垂直居中：通过jQuery设置div的CSS，获取div的左、上的边距偏移量，边距偏移量的算法就是用页面窗口的宽度减去该div得宽度，得到的值再除以2即左偏移量，右偏移量算法相同。

注意div的CSS设置要在resize()方法中完成，就是每次改变窗口大小时，都要执行设置div的CSS。

$(window).resize(function(){ //浏览器缩放监控
    $("div").css({ 
        position: "absolute", 
        left: ($(window).width() - $("div").outerWidth())/2, 
        top: ($(window).height() - $("div").outerHeight())/2 
    });        
}); 

此外在页面载入时，就需要调用resize()。

$(function(){ 
    $(window).resize(); 
});

第三种方法的好处就是不需要知道元素的具体宽度和高度大小，直接用jQuery就可以实现水平和垂直居中，而且兼容各浏览器，这个方法在很多的弹出层效果中应用。