让div等块级元素水平以及垂直居中的解决办法

一、背景

　　我们在设计页面的时候，经常要把div等块级元素居中显示，而且是相对页面窗口水平和垂直方向居中显示，如让登录窗口居中显示。我们传统解决的办法是用纯CSS来让div等块级元素居中。在本文中，我将给大家讲述如何用CSS和jQuery两种方法让div等块级元素水平和垂直居中。

二、解决办法

1.CSS让div等块级元素水平居中

　原理：让一个div等块级元素水平居中，直接用CSS就可以做到。只要设置了div等块级元素的宽度，然后使用margin设置边距0 auto，CSS自动算出左右边距，使得div等块级元素居中。

　CSS代码：

.mycss{
    margin:0 auto;
    width:300px;
    height:200px;
} 

但是如果要使div等块级元素垂直方向也居中，恐怕CSS需要修改了。

2.CSS让一行内容垂直居中显示

　原理：当我们设置该行元素的高度和行高相同时，CSS会让它自动垂直居中显示。

　CSS代码：

  .mycss{
     height:200px;
     line-height:20px;
}

3.让div等块级元素水平和垂直都居中，即永远处于屏幕的正中央，当我们做如登录块时非常有用！

　实现一、原理：要让div等块级元素水平和垂直居中，必需知道该div等块级元素的宽度和高度，然后设置位置为绝对位置，距离页面窗口左边框和上边框的距离设置为50%，这个50%就是指页面窗口的宽度和高度的50%，最后将该div等块级元素分别左移和上移，左移和上移的大小就是该div等块级元素宽度和高度的一半。

CSS代码：

.mycss{
   width:300px;
   height:200px;
   position:absolute;
   left:50%;
   top:50%;
   margin:-100px 0 0 -150px
} 

该方法使用普遍，但是前提是必需设置div等块级元素的宽度和高度。如果当页面div等块级元素宽度和高度是动态的，比方说需要弹出一个div等块级元素元素层并且要居中显示，div等块级元素的内容是动态的，所以宽度和高度也是动态的，这时需要用jQuery可以解决居中。

实现二原理：利用CSS的margin设置为auto让浏览器自己帮我们水平和垂直居中。

CSS代码：

.mycss{
    position: absolute;
    left: 0px;
    right:;
    top:;
    bottom:;
    margin: auto;
    height: 200px;
    width: 300px;
}

4.jQuery实现水平和垂直居中

　原理：jQuery实现水平和垂直居中的原理就是通过jQuery设置div等块级元素的CSS，获取div等块级元素的左、上的边距偏移量，边距偏移量的算法就是用页面窗口 的宽度减去该div等块级元素的宽度，得到的值再除以2即左偏移量，右偏移量算法相同。注意div等块级元素的CSS设置要在resize()方法中完成，就是每次改变窗口大 小时，都要执行设置div等块级元素的CSS。

　jquery代码：

$(window).resize(function(){
    $(".myblock").css({
        position: "absolute",
        left: ($(window).width() - $(".myblock").outerWidth())/2,
        top: ($(window).height() - $(".myblock").outerHeight())/2
    });
});

此外在页面载入时，就需要调用resize()方法

$(function(){
    $(window).resize();
});

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

tips:在页面的外面建一个table，设置高度为100%，然后设置td垂直居中显示，把页面套进去就OK拉！