Question

就像您在http://twitterfeed.com/上点击使用OpenID登录时所发生的情况一样，我希望我的登录框显示在窗口的中央，并且仅在点击某个链接时显示。< / p>

但是现在我很难将div放在中心，我已经编写了CSS，但它不起作用

#logindiv {
    position: relative;
    overflow: auto;
    margin: 0 auto;
}

Answer 1

“位置：相关;”是一个错字。它应该是“position：relative;”

查看您链接的网站，它是水平居中但不是垂直居中。他们通过使用具有单行和单列的表来实现这一目标。

Answer 2

div的位置/样式可以用以下方式模拟：

#overlay_div {
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
background-color: #000;
}

#overlay_div #logindiv {
position: absolute;
top: 50%;
left:50%;
height: 20em;
width: 40em;
margin: -10em 0 0 -20em;
background-color: #fff;
}

#logindiv的左上角绝对位于窗口宽度的50％处和窗口高度的50％处（从左上角开始）。

然后由margin改变它，将其高度的50％移到页面上，并将其宽度的50％移回页面。更改#logindiv的宽度/高度将需要不同的负边距来集中定位。

单击按钮时如何在窗口中央显示登录框？

2 个答案: