透過JavaScript使Div居中並隨網頁大小改變而改變_javascript技巧

在使用Java做後台的時候，都會做到登入的頁面，但是自己的頁面太難看了，要居中沒居中，要顏色沒顏色，但是無論是怎麼樣都得使登錄的框居中吧！先前的想法是透過CSS Div使div居中，但現在的想法改變了，透過JavaScript可以簡單的使Div在頁面上居中，隨著網頁大小的改變做出相應的改變。而且只要明白了居中的原理輕而易舉的就可以實現了。
先看一下居中的原理吧!
先看一張圖。
 
從圖中看到了什麼？可以看到紅色的框框居中了，為什麼會居中呢？透過觀察可以發現紅框的上下的藍色的間距線是一樣長的，這樣可以確保了垂直居中，紅框的左右的綠色間距線也是一樣長的，這樣可以確保了水平居中。
但是怎麼使上下的間距相等呢？左右的間距相等呢？
在看一張圖：
 
假設目前網頁的高為350px，寬為400px，而紅框的高為150px，寬為200px，我們可以發現網頁的高減去紅框元素的高得到200px像素，而這200px像素正是上下邊距的總和，上下邊距各得到了100px，同理，左右也是一樣的。
有沒有感覺到什麼？
如果我們知道了網頁元素的高或寬，減去元素的高或寬，然後在除以2，就得到了上下左右邊距的距離。我們通常給元素的定位是怎麼訂的呢？不都是透過top和left的座標定的嗎？那麼現在紅框的座標是什麼呢？
再看一張圖：
 
紅色框的座標是藍色的上線100px，和綠色的左線100px，即left和top的值，這兩個值不是算出來的嗎？
可以總結一個公式：
居中的元素的top =（網頁高–元素的高）/ 2;
居中的元素的left= (網頁寬–元素的寬) /2;
轉換為JavaScript的語法為：
top = (document.body.clientHeight - element.offsetHeight)/2;
left = (document.body.clientWidth - element.offsetWidth)/2
取得到top和left的座標不就居中了。
以下是居中的完整程式碼：
這裡要注意幾個問題，要設定元素的position的屬性為absolute，也就是絕對定位，然後加入兩個事件onload和onresize，要加上px的字串，offsetHeight是取得元素本身的高，offsetWidth是取得元素本身的寬，這就是當網頁載入時和改變大小時div都會居中。不過這種做法是居中的元素和網頁的居中，如果想要一個元素在另一個元素的內部居中的話，原理是一樣的。我們只需要將網頁的寬和高的程式碼改為另一個元素的寬和高的程式碼就行了。另一個元素的寬和高可以透過取得到目前元素的parent元素的高和寬。這樣也是可以居中的。如果用jquery這個框架，那麼程式碼就更簡單了。
轉載請指明出處。