html – Div水平中心和垂直中间

发布时间：2020-12-14 23:50:53 所属栏目：资源来源：网络整理

导读：参见英文答案 Best way to center a div on a page vertically and horizontally?21个我想对齐一个div的水平中心和垂直中间的一个页面的正文. css： .loginBody { width: 100%; height: 100%; margin: 0; padding: 0; background: #999; /* for non-css3 br

参见英文答案 > Best way to center a <div> on a page vertically and horizontally?21个
我想对齐一个div的水平中心和垂直中间的一个页面的正文.

css：

.loginBody {
    width: 100%;
    height: 100%;
    margin: 0;
    padding: 0;
    background: #999; /* for non-css3 browsers */
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#cccccc',endColorstr='#000000'); /* for IE */
    background: -webkit-gradient(linear,left top,left bottom,from(#ccc),to(#000)); /* for webkit browsers */
    background: -moz-linear-gradient(top,#ccc,#000); /* for firefox 3.6+ */
}
.loginDiv {
    position: absolute;
    left: 35%;
    top: 35%;
    text-align: center;        
    background-image: url('Images/loginBox.png');
    width:546px;
    height:265px;
}

我有这个html：

<body class="loginBody">
    <form id="form1">
    <div class="loginDiv">

    </div>
    </form>
</body>

现在它的行为就像我想要的那样,但如果我调整浏览器的大小,它就会完全扭曲,也许这是因为绝对的定位.我正在展示一些截图：
在调整大小的Firefox中：

在调整大小的chrome中：

调整大小ie：

在最大化的窗口是：

有没有办法解决这个问题,使用相对定位来实现这个对中的对齐？

谢谢.

编辑：

在Firefox中,调整大小时不会出现滚动条,但会出现在其他浏览器中.

解决方法

尝试这个：

.loginDiv {
    position: absolute;
    left: 50%;
    top: 50%;
    text-align: center;        
    background-image: url('Images/loginBox.png');
    width:546px;
    height:265px;
    margin-left: -273px; /*half width*/
    margin-top: -132px; /*half height*/
}

您将其移动到中心,而不是向左和向上延伸一半的尺寸 – 即使在调整大小时也会使它居中

（编辑：李大同）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!