DIV水平和垂直方向都居中(转)
来源 ： http://www.iteye.com/topic/609383
还有一贴 ：http://justcoding.iteye.com/blog/584186
昨天考完试，今天太无聊了，于是看了一下JavaScript，然后写了个让DIV水平和垂直方向都居中的JS。
Chrome 4.0.x、Firefox 3.6、IE 8 下正常。
Html代码 收藏代码
<!-- #main { font-size:30px; width:120px; height:100px; background:red; } --> <script src="test.js"></script> <div id="main">测试文本</div></pre> //设置div页面居中，参数为div的id function autoMargin(id) { var marginWid;//保存margin结果 var marginHei; var divWid;//居中的DIV的大小 var divHei; var mainEle = document.getElementById(id);//要计算的div的对象 //Trident内核 if (new RegExp("trident", "i").test(navigator.userAgent)) { //获取可见域大小 marginWid = document.documentElement.clientWidth; marginHei = document.documentElement.clientHeight; //document.write("trident" + width + "*" + height); //获取指定元素的宽和高 divWid = mainEle.currentStyle.width.replace(/px/, ""); divHei = mainEle.currentStyle.height.replace(/px/, ""); //alert(divWid + "\n" + divHei); //Webkit和Gecko内核 } else if (new RegExp("webkit", "i").test(navigator.userAgent) || new RegExp("gecko", "i").test(navigator.userAgent)) { //获取可见域大小 marginWid = window.innerWidth; marginHei = window.innerHeight; //document.write("webkit" + width + "*" + height); //获取指定元素的宽和高 var style = window.getComputedStyle(mainEle, null); divWid = style.getPropertyValue("width").replace(/px/, ""); divHei = style.getPropertyValue("height").replace(/px/, ""); //alert(divWid + "\n" + divHei); } //计算margin大小 marginWid = marginWid / 2 - divWid / 2; marginHei = marginHei /2 - divHei / 2; mainEle.style.marginTop = marginHei + "px"; mainEle.style.marginLeft = marginWid + "px"; }