div在body中水平居中和垂直居中对齐的方法总结

在做网站的时候经常用到让div在屏幕中或者body中水平居中和垂直居中的效果，为此在网上搜集了相关的实现方法，并记录一下，希望能帮助大家。

div在body中实现水平居中的的代码

让一个DIV水平居中，直接用CSS就可以做到，见一下代码：
比如div的class=“div1”，

.div{  
    margin:0 auto;
  width:100px;
  height:100px;
}

实现垂直居中的方法1

利用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就可以实现水平和垂直居中，而且兼容各浏览器，这个方法在很多的弹出层效果中应用。

垂直居中方法2

body{
    position: relative;
    width: 100%;
    height: 100%;
}

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

以上3个方法，分别实现了div在body中水平居中和垂直居中，其中垂直居中方法2比较好用，建议使用。

更多相关推荐

• 在bootstrap4中图片文字在div中垂直居中的方法