下面就跟大家一起大略剖析下JS是如何实现让DIV盒子，在页面自动居中，并且随着页面的变动，也能居中。
思路：
一、首先我们的DIV盒子模型，一样平常是绝对定位于浏览器的，那么首先我们可以先获取全体页面（浏览器的可视区）的宽度、高度。
二、然后获取自身DIV盒子的宽度、高度。
三、用浏览器可视区的宽度、高度，减去DIV自身的宽度，高度，然后除以2。就可以获取到DIV间隔页面的top值，left值。在赋值给DIV相应的top值，left值。
四、随着我们的浏览器窗口的改变，让DIV盒子也能随着页面的改变而居中。（利用onresize事宜）
代码截图：
代码如下:
<!doctypehtml> <html> <head> <metacharset="utf-8"> <title>JS实现-DIV自动居中代码</title> <metaname="keywords"content="" /> <metaname="description"content="" /> <style> { margin: 0; padding: 0 } #box { width: 100px; height: 100px; position: absolute; top: 30px; left: 20px; border: 1px solid red; } </style> </head> <body> <divid="box"> </div> <script> window.onload = function() { functionbox() { //获取DIV为‘box’的盒子 var oBox = document.getElementById('box'); //获取元素自身的宽度 varL1 = oBox.offsetWidth; //获取元素自身的高度 varH1 = 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>
