使浮动DIV始终居中

最新推荐文章于 2022-05-19 18:36:14 发布

转载最新推荐文章于 2022-05-19 18:36:14 发布 · 7.9k 阅读

文章标签：

#div

JS&HTML&CSS 专栏收录该内容

34 篇文章

订阅专栏

本文介绍了一种使用JavaScript实现网页元素自动居中的方法。通过监听窗口大小变化并调整元素的位置，使得一个指定大小的黄色方块始终处于浏览器窗口的正中央。这种方法适用于创建弹窗或特殊视觉效果。

<html>  
    <head>  
    <meta  http-equiv="Content-Type"  content="text/html;  charset=gb2312">  
    <title>  *  emu  *  </title>  
    <SCRIPT>  
    <!--  
        window.onresize  =  resetDIV;  
        function  resetDIV()  
        {  
            with(document.getElementsByTagName("DIV")[0].style)  
            {  
                left  =  (document.body.offsetWidth-parseInt(width))/2  
                top  =  (document.body.offsetHeight-parseInt(height))/2  
             }  
        }  
    //-->  
    </SCRIPT>  
    </head>  
    <body  onload="resetDIV()">  
        <div  style="position:absolute;width=200;height=200;background-color=yellow"></div>  
    </body>  
</html>  