水平居中方法

方法1 CSS实现水平和垂直居中

要让DIV水平和垂直居中，必需知道该DIV得宽度和高度，然后设置位置为绝对位置，距离页面窗口左边框和上边框的距离设置为50%，这个50%就是指页面窗口的宽度和高度的50%，最后将该DIV分别左移和上移，左移和上移的大小就是该DIV宽度和高度的一半。

.mydiv{ 
   width:300px;  
   height:200px;  
   position:absolute;  
   left:50%;  
   top:50%;  
   margin:-100px 0 0 -150px 
}
 
 
1
2
3
4
5
6
7
8
 
 
1
2
3
4
5
6
7
8

方法2

  .mydiv{
    height: 50px;
    width: 100px;
    margin:auto;
    position: absolute;
    top:0;
    left:0;
    bottom: 0;
    right: 0;
  }
 
 
1
2
3
4
5
6
7
8
9
10
 
 
1
2
3
4
5
6
7
8
9
10

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

方法3 jQuery实现水平和垂直居中

$(document).ready(function(){
                        $(window).resize(function(){
                            $('.mydiv').css({
                                position:'absolute',
                                left: ($(window).width() - $('.container').outerWidth())/2,
                                top: ($(window).height() - $('.container').outerHeight())/2
                            });
                        });
                        // 最初运行函数
                        $(window).resize();
                    });
 
 
1
2
3
4
5
6
7
8
9
10
11
 
 

  
  
 
 
 
 
1
2
3
4
5
6
7
8
9
10
11

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