<!doctype html> <html> <head> <meta charset="utf-8"> <title>JS實現-DIV自動居中代碼</title> <meta name="keywords" content="" /> <meta name="description" content="" /> <style> *{margin:0;padding:0} #box{width:100px;height:100px;position:absolute;top:30px;left:20px; background:#ccc} </style> </head> <body> <div id="box"></div> <script> window.onload = function(){ function box(){ //獲取DIV為'box'的盒子 var oBox = document.getElementById('box'); //獲取元素自身的寬度 var L1 = oBox.offsetWidth; //獲取元素自身的高度 var H1 = oBox.offsetHeight; //獲取實際頁面的left值。（頁面寬度減去元素自身寬度/2） var Left = (document.documentElement.clientWidth-L1)/2; //獲取實際頁面的top值。（頁面寬度減去元素自身高度/2） var top = (document.documentElement.clientHeight-H1)/2; oBox.style.left = Left+'px'; oBox.style.top = top+'px'; } box(); //當瀏覽器頁面發生改變時，DIV隨着頁面的改變居中。 window.onresize = function(){ box(); } } </script> </body> </html>