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

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

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

天做项目需要用的一个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>