Как заставить рамку входа отображаться в центре окна при нажатии кнопки?

Question

Точно так же, как то, что происходит, когда вы нажимаете Войдите с помощью OpenID на http://twitterfeed.com/, Я хочу, чтобы мой фрейм входа отображался в центре окна, и только при нажатии на какую-либо ссылку. *

Но теперь мне сложно центрировать 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 s, перемещая его на 50% его высоты вверх по странице и на 50% его ширины назад по странице. Изменение ширины / высоты #logindiv потребует различных отрицательных полей для централизованного позиционирования.

Answer 2

"позиция: связанная;" это опечатка. Это должно быть "position: относительный;"

Глядя на сайт, на который вы ссылаетесь, он расположен горизонтально, но не вертикально. Они добились этого, используя таблицу с одной строкой и одним столбцом.