CSS+Jquey实现水平和垂直居中

时间:2016-12-25 15:37:23 类型:HTML/CSS
字号:    

    我们在实际的工作应用过程中,经常需要将DIV居中显示,并且是相对于页面窗口水平和垂直方向的居中显示,比如像:登入窗口的居中显示。

    那么是如何实现的呢?接下来南昌雅腾教育提供用CSS和JQuery这两种方法来实现,供大家参考学习。

CSS实现DIV水平居中

PS:本文中所指的DIV包括HTML页面中所有的元素。
让一个DIV水平居中,直接用CSS就可以做到。只要设置了DIV的宽度,然后使用margin设置边距0 auto,CSS自动算出左右边距,使得DIV居中。

.mydiv{   
    margin:0 auto;   
    width:300px;   
    height:200px;   
} 
CSS实现DIV水平和垂直居中

我们如果要让DIV水平和垂直居中,必须要知道该DIV的宽度和高度,然后设置位置为绝对位置,距离页面窗口左边框和上边框的距离设置为50%,这个50%就是指页面窗口的宽度和高度的50%,最后将该DIV分别左移和上移,左移和上移的大小就是该DIV宽度和高度的一半。

.mydiv{ 
   width:300px;  
   height:200px;  
   position:absolute;  
   left:50%;  
   top:50%;  
   margin:-100px 0 0 -150px 
} 
该方法使用普遍,但前提是必须要设置DIV的宽度和高度,如果当页面DIV宽度和高度是动态的,比如说需要弹出一个DIV层并且要居中显示,DIV的内容是动态的,所以宽度和高度也是动态的,这时需要用jQuery来解决居中。

JQuery实现水平和垂直居中

jQuery实现水平和垂直居中的原理就是通过jQuery设置DIV的CSS,获取DIV的左、上的边距偏移量,边距偏移量的算法就是用页面窗口的宽度减去该DIV的宽度,得到的值再除以2即左偏移量,右偏移量算法相同。注意DIV的CSS设置要在resize()方法中完成,就是每次改变窗口大小时,都要执行设置DIV的CSS,代码如下:

$(window).resize(function(){ 
    $(".mydiv").css({ 
        position: "absolute", 
        left: ($(window).width() - $(".mydiv").outerWidth())/2, 
        top: ($(window).height() - $(".mydiv").outerHeight())/2 
    });         }); 
在页面载入时,就需要调用resize()。

$(function(){ 
    $(window).resize();  });
该方法的优点就在于不需要知道DIV的具体宽度和高度,直接用jQuery就可以实现水平和垂直居中,而且兼容各浏览器,这个方法在很多的弹出层效果中应用。


更多关于PHP开发技术WEB前端开发技术的交流与学习,请加QQ:1939594233(微信同号