css div相对屏幕永远居中

最新推荐文章于 2022-06-30 17:49:19 发布

转载最新推荐文章于 2022-06-30 17:49:19 发布 · 213 阅读

0 ·

CC 4.0 BY-SA版权

原文链接：http://www.cnblogs.com/zhyue93/p/css_1.html

本文介绍了一种使Div元素在页面上保持固定居中的CSS布局方法，适用于IE7及以上版本浏览器。通过设置Div的位置属性及margin值实现居中效果。

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

不管屏幕如何滑动，该div始终保持在屏幕正中央(支持IE7（包括IE7）以上版本)

<div class="loginBox"></div>

.loginBox {
    background: #FA2;
    width: 700px;
    height: 400px;
    position: fixed;
    left: 50%;
    top: 50%;
    z-index: 11;
    /*设定这个div的margin-top的负值为自身的高度的一半,margin-left的值也是自身的宽度的一半的负值.*/ 
    /*宽为400,那么margin-top为-200px*/ 
    /*高为200那么margin-left为-100px;*/ 
    margin: -200px 0 0 -350px;
}