让div在body中⽔平和垂直居中
我们在设计页⾯的时候，经常要把DIV居中显⽰，⽽且是相对页⾯窗⼝⽔平和垂直⽅向居中显⽰，如让登录窗⼝居中显⽰。我们传统解决的办法是⽤纯CSS来让DIV居中。在本⽂中，我将给⼤家讲述如何⽤CSS和两种⽅法让DIV⽔平和垂直居中。
CSS让DIV⽔平居中
说明，本⽂中所指的DIV包括HTML页⾯中所有的元素。
让⼀个DIV⽔平居中，直接⽤CSS就可以做到。只要设置了DIV的宽度，然后使⽤margin设置边距0 auto，CSS⾃动算出左右边距，使得DIV居中。
.mydiv{
margin:0 auto;
width:300px;
height:200px;
}
但是如果要使DIV垂直⽅向也居中，恐怕CSS需要修改了。
CSS实现⽔平和垂直居中
要让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();
css设置文字垂直居中
});
此⽅法的好处就是不需要知道DIV的具体宽度和⾼度⼤⼩，直接⽤jQuery就可以实现⽔平和垂直居中，⽽且兼容各浏览器，这个⽅法在很多的弹出层效果中应⽤。

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。