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

Question

就像您在 http://twitterfeed.com/ 上单击使用 OpenID 登录 时发生的情况一样, 我希望我的登录框架显示在窗口的中央，并且只有在单击某些链接时才显示。

但是现在我很难让一个div居中，我写了如下的CSS但是它不起作用

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

Answer 1

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 的宽度/高度将需要不同的负边距以居中定位。