div的水平和垂直居中

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
    });