方法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 
}

方法2

  .mydiv{
    height: 50px;
    width
 
: 100px;
    margin:auto;
    position: absolute;
    top:0;
    left:0;
    bottom: 0;
    right: 0;
  }

該方法使用普遍，但是前提是必需設定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();
                    });

此方法的好處就是不需要知道DIV的具體寬度和高度大小，直接用jQuery就可以實現水平和垂直居中，而且相容各瀏覽器，這個方法在很多的彈出層效果中應用。