div自动适应浏览器窗口水平和垂直居中

时间：2021-09-03 08:13:24

html

<body>

    <div id="centerDiv">自动适应水平和垂直居中</div>

</body>

css

*{margin:;padding:;}

    #centerDiv{width:834px; height:550px; border:1px solid #9f9f9f;

             position:absolute;

             left:50%;margin-left:-417px;

             top:50%;margin-top:-275px;

         }

原理就是:先用left:50%;top:50%让这个div的左上角居于页面的正中,然后用margin-left:-417px;margin-top:-275px;使div向左向上移动它自身宽高的一半.

相关文章