[jQuery] 上下左右居中的layout

有時候layout會需要做上下左右居中，在高度未知的情況下，純CSS的方法可能會蠻麻煩的..
(用display:table-cell;可行嗎?)，改用jQuery來計算會簡單許多

HTML

<div id="wpr">任意高度的內文區塊</div>

CSS

body {height:100%; position:relative;}
#wpr {width:70%; position:absolute; left:50%; margin-left:-35%;}
/* 
若內文區塊的高度固定且已知的話，到此為止即可，不需要下面的jQuery，
以高500px為例，只要再加上以下CSS：
html {height:100%;}
#wpr {top:50%; height:500px; margin-top:-250px;}
*/

jQuery

$(window).resize(function(){
   var bodyHeight = $(this).height();  //瀏覽器視窗高度
   var wprHeight = $("#wpr").height();  //內文區塊高度

   $("#wpr").css({
      "top" : bodyHeight / 2 +"px",
      "marginTop" : - wprHeight / 2 +"px"
   });
}).trigger("resize");  //觸發resize事件

實際執行的範例：
http://jsfiddle.net/wD8uT/