首先再次詳細解釋一下JS中視窗和網頁的幾種尺寸屬性的含義
document.body.clientWidth（網頁可見地區寬）：是指瀏覽器顯示網頁的地區寬度，不包括瀏覽器的邊框寬度和垂直捲軸的寬度。大小隨著瀏覽器的視窗大小而改變。
document.body.clientHeight（網頁可見地區高）：是指瀏覽器顯示網頁的地區所能看到的高度，不包括瀏覽器的邊框寬度和水平捲軸的高度。大小隨著瀏覽器的視窗大小而改變。
document.body.scrollTop（網頁被捲去的高）：是指拉動垂直捲軸時網頁上面被地址欄及功能表列遮蓋著的部分的高。
document.body.scrollLeft（網頁被捲去的左）：是指拉動水平捲軸時網頁左面被左邊線遮蓋著的部分的寬。
現在我們來分析一下程式該如何?：
第一步我們要實現的是使層在彈出時絕對置中不去考慮是否有捲軸的情況。
1.計算出層距離顯示地區左邊和上邊的位置
注意：divId指的是所要置中的層,divId.clientWidth為其寬度！＠
var divId = document.getElementById("xxx");
var v_left=(document.body.clientWidth-divId.clientWidth)/2;
var v_top=(document.body.clientHeight-divId.clientHeight)/2;
2.把得到的值重新賦給DIV的left和top屬性
divId.style.left＝v_left;
divId.style.top=v_top;
說明：divId為DIV標籤的id值
這樣這個層就是置中顯示的了。
第二步我們要實現的是使在拖動捲軸的情況下彈出的層也能置中。
其實很簡單我們只要把拖動的寬度和高度加到前面計算出來的左邊距和上邊距中就OK 了。
v_left+=document.body.scrollLeft;
v_top+=document.body.scrollTop;
2.把得到的值重新賦給DIV的left和top屬性
divId.style.left＝v_left;
divId.style.top=v_top;
這樣顯示出來就是置中的了。
完整代碼如下：
<!doctype html public "-//w3c//dtd html 4.0 transitional//en"> <html> <head> <title>彈出的層置中顯示</title> <meta name="generator" content="editplus"> <meta name="author" content=""> <meta name="keywords" content=""> <meta name="description" content=""> <script language="javascript" type="text/javascript"> function divcenter() { var divId=document.getElementById('mxh'); divId.style.left=(document.body.clientWidth-divId.clientWidth)/2+document.body.scrollLeft; divId.style.top=(document.body.clientHeight-divId.clientHeight)/2+document.body.scrollTop; } </script> </head> <body> <table width=100%> <tr><td><span onclick="divcenter()">test</span></td></tr> <tr><td><span onclick="divcenter()">test</span></td></tr> <tr><td><span onclick="divcenter()">test</span></td></tr> <tr><td><span onclick="divcenter()">test</span></td></tr> <tr><td><span onclick="divcenter()">test</span></td></tr> <tr><td><span onclick="divcenter()">test</span></td></tr> <tr><td><span onclick="divcenter()">test</span></td></tr> <tr><td><span onclick="divcenter()">test</span></td></tr> <tr><td><span onclick="divcenter()">test</span></td></tr> <tr><td><span onclick="divcenter()">test</span></td></tr> <tr><td><span onclick="divcenter()">test</span></td></tr> <tr><td><span onclick="divcenter()">test</span></td></tr> <tr><td><span onclick="divcenter()">test</span></td></tr> <tr><td><span onclick="divcenter()">test</span></td></tr> <tr><td><span onclick="divcenter()">test</span></td></tr> <tr><td><span onclick="divcenter()">test</span></td></tr> <tr><td><span onclick="divcenter()">test</span></td></tr> <tr><td><span onclick="divcenter()">test</span></td></tr> <tr><td><span onclick="divcenter()">test</span></td></tr> <tr><td><span onclick="divcenter()">test</span></td></tr> <tr><td><span onclick="divcenter()">test</span></td></tr> <tr><td><span onclick="divcenter()">test</span></td></tr> <tr><td><span onclick="divcenter()">test</span></td></tr> <tr><td><span onclick="divcenter()">test</span></td></tr> <tr><td><span onclick="divcenter()">test</span></td></tr> <tr><td><span onclick="divcenter()">test</span></td></tr> <tr><td><span onclick="divcenter()">test</span></td></tr> <tr><td><span onclick="divcenter()">test</span></td></tr> <tr><td><span onclick="divcenter()">test</span></td></tr> <tr><td><span onclick="divcenter()">test</span></td></tr> <tr><td><span onclick="divcenter()">test</span></td></tr> <tr><td><span onclick="divcenter()">test</span></td></tr> <tr><td><span onclick="divcenter()">test</span></td></tr> <tr><td><span onclick="divcenter()">test</span></td></tr> <tr><td><span onclick="divcenter()">test</span></td></tr> <tr><td><span onclick="divcenter()">test</span></td></tr> <tr><td><span onclick="divcenter()">test</span></td></tr> <tr><td><span onclick="divcenter()">test</span></td></tr> <tr><td><span onclick="divcenter()">test</span></td></tr> <tr><td><span onclick="divcenter()">test</span></td></tr> <tr><td><span onclick="divcenter()">test</span></td></tr> <tr><td><span onclick="divcenter()">test</span></td></tr> <tr><td><span onclick="divcenter()">test</span></td></tr> <tr><td><span onclick="divcenter()">test</span></td></tr> <tr><td><span onclick="divcenter()">test</span></td></tr> <tr><td><span onclick="divcenter()">test</span></td></tr> <tr><td><span onclick="divcenter()">test</span></td></tr> <tr><td><span onclick="divcenter()">test</span></td></tr> <tr><td><span onclick="divcenter()">test</span></td></tr> <tr><td><span onclick="divcenter()">test</span></td></tr> <tr><td><span onclick="divcenter()">test</span></td></tr> <tr><td><span onclick="divcenter()">test</span></td></tr> <tr><td><span onclick="divcenter()">test</span></td></tr> <tr><td><span onclick="divcenter()">test</span></td></tr> <tr><td><span onclick="divcenter()">test</span></td></tr> <tr><td><span onclick="divcenter()">test</span></td></tr> </table> <div id=mxh >我是置中顯示的了。</div> </body> </html>
[Ctrl+A 全選 注:如需引入外部Js需重新整理才能執行]
如果你想在拖動捲軸或是視窗重設大小時，層也能置中顯示的話，可以在body的屬性裡面加上onresize="divcenter();"和 onscroll="divcenter();"就OK了，不過可能顯示的效果不是很好，特別是在拖動捲軸時的效果可能是一擅一擅的，忒不爽。
