CSS实现div的水平居中
div的水平居中可以通过margin设置为0 auto实现。
.myDiv {
width: 200px;
height: 100px;
margin: 0 auto;
}
CSS实现div的水平和垂直居中
通过CSS实现div的水平和垂直居中,首先需要知道div的高度和宽度,然后设置绝对定位,div的left和top分别设置为50%,然后通过margin左移和上移,距离分别为宽度和高度的一半。
.myDiv {
width: 200px;
height: 100px;
position:absolute;
left:50%;
top:50%;
margin:-50px 0 0 -100px; /*width/2 height/2*/
}
如果div的高度和宽度的动态的,此事无法使用css实现居中,需要使用javascript/jQuery来实现。
jQuery实现div的水平和垂直居中
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
});