DIV水平和垂直方向都居中(转)

昨天考完试，今天太无聊了，于是看了一下JavaScript，然后写了个让DIV水平和垂直方向都居中的JS。

Chrome4.0.x、Firefox3.6、IE8下正常。

Html代码收藏代码

<!-- #main {  
            font-size:30px;  
            width:120px;  
            height:100px;  
            background:red;  
        } -->  
      
        <script src="test.js"></script>  
      
        <div id="main">测试文本</div></pre>

Js代码收藏代码

//设置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";  
    }