How to make a login frame display in the center of the window when the button is clicked?

Question

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.

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

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

Answer 1

"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.

Answer 2

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

#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).

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.