jquery實現水平垂直置中

在建立網頁布局的時候，我們經常會面臨一個問題，就是讓一個div實現水平和垂直置中，雖然好幾種方式實現，但是今天介紹時我最喜歡的方法，通過css和jQuery實現。
1、通過css實現水平置中：.className{
 margin:0 auto;
 width:200px;
 height:200px;
}

2、通過css實現水平置中和垂直置中

通過css建立一個水平置中和垂直置中的div是一件比較麻煩的事情，您必須事Crowdsourced Security Testing道另外一個div的尺寸：

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

3、通過jQuery實現水平置中和垂直置中前面已經提到過了，css的方法只適用於有固定尺寸的div，所以到jQuery發揮作用了：

$(window).resize(function(){
 $('.className').css({
  position:'absolute',
  left: ($(window).width() - $('.className').outerWidth())/2,
   top: ($(window).height() - $('.className').outerHeight())/2 + $(document).scrollTop()
 });
});
//初始化函數
$(window).resize();

這種方法的好處是您無需知道div有多大，缺點是它只能通過JavaScript實現。