美文网首页
jQuery实现div水平和垂直居中

jQuery实现div水平和垂直居中

作者: jeanzy | 来源:发表于2019-04-09 08:57 被阅读0次

    jQuery实现水平和垂直居中的原理就是通过jQuery设置DIV的CSS,获取DIV的左、上的边距偏移量,边距偏移量的算法就是用

    页面窗口的宽度减去该DIV的宽度,得到的值再除以2即左偏移量,右偏移量算法相同。

    注意DIV的CSS设置要在resize()方法中完成,就是每次改变窗口大小时,都要执行设置DIV的CSS,代码如下:

    $(window).resize(function(){

    $(".row").css({

    position:"absolute",

    left: ($(window).width() -$(".row").outerWidth())/2,

    right: ($(window).width() -$(".row").outerWidth())/2,

    top: ($(window).height() -$(".row").outerHeight())/2

        });

    });

    页面载入时,调用resize()。

    $(function(){

    $(window).resize();

    });

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

    相关文章

      网友评论

          本文标题:jQuery实现div水平和垂直居中

          本文链接:https://www.haomeiwen.com/subject/lcyviqtx.html