javascript01-div居中的兼容问题，发一个奇怪的代码，可能是我没有理解精髓吧。...

最新推荐文章于 2025-11-27 12:57:01 发布

最新推荐文章于 2025-11-27 12:57:01 发布 · 189 阅读

文章标签：

#javascript #xhtml #ViewUI

本文探讨了一个关于DIV元素居中的实现方法，并解决了在不同浏览器（如IE、Firefox及Google Chrome）下的兼容性问题。文章提供了一段具体的代码示例，通过计算页面宽度和高度来确保DIV能够正确居中显示。

天做项目需要用的一个div居中，下面一个模态层的问题，我写了个代码，大概分离出来如下。

view sourceprint?

<html xmlns="http://www.w3.org/1999/xhtml"> 

<head runat="server"> 

    <title></title> 

    <style type="text/css"> 

        div 

        { 

            width: 200px; 

            height: 300px; 

            background: red; 

            border: 1px solid black; 

        } 

    </style> 

</head> 

<body> 

    <div> 

    </div> 

    <div> 

    </div> 

    <div id="d" style="position: absolute; width: 200px; height: 300px;"> 

    </div> 

    <script type="text/javascript"> 

        var pageWidth = 0; 

        var pageHeight = 0; 

        var left = "0px"; 

        var top = "0px"; 

        var divWidth = 0; 

        var divHeight = 0; 

        var d = document.getElementById("d"); 

        if (d) { 

            //        divWidth = (d.style.width.toString()).replace("px", ""); 

            //        divHeight = (d.style.height.toString()).replace("px", ""); 

            divWidth = parseInt(d.style.width.toString()); 

            divHeight = parseInt(d.style.height.toString()); 

        } 

        if (document.compatMode == "CSS1Compat") { 

            pageWidth = parseInt(document.documentElement.clientWidth); 

            pageHeight = parseInt(document.documentElement.clientHeight); 

        } else { 

            pageWidth = parseInt(document.body.clientWidth); 

            pageHeight = parseInt(document.body.clientHeight); 

        } 

        left = ((pageWidth - divWidth) / 2).toString() + "px"; 

        top = ((pageHeight - divHeight) / 2).toString()+"px"; 

        d.style.left = left 

        d.style.top = ((pageHeight - divHeight) / 2).toString() + "px";//goog浏览器不得行???? 

        d.innerHTML = "pageWidth:" + pageWidth + "<br/> pageHeight:" + pageHeight + "<br/> divWidth:" + divWidth 

     + " <br/>divHeight:" + divHeight + " <br/>left:" + left + " <br/>top:" + top; 

    </script> 

</body> 

</html>