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

Just like what happens when you click Sign in with OpenID on http://twitterfeed.com/, I want my login frame displays in the center of the window, and only when some link is clicked.

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

But now I have difficult to center a div, I have written CSS as following but it doesn't work

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

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

2 个解决方案

#1

The position/styling of the div can be emulated with:

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;
}

The top left corner of the #logindiv is positioned absolutely at a point 50% across the width of the window and 50% of the height of the window (from the top-left origin).

#logindiv的左上角绝对位于窗口宽度的50%和窗口高度的50%(从左上角的原点)。

This is then altered by the margins, moving it 50% of its height up the page, and 50% of its width back across the page. Changing the width/height of the #logindiv will require different negative margins for positioning centrally.

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

#2

"position: related;" is a typo. It should be "position: relative;"

“位置:相关;”是一个错字。它应该是“位置:相对的”;

Looking at the site you linked to, it's horizontally centered but not vertically centered. They achieved that by using a table with a single row and a single column.

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

#1