CSS вертикально и горизонтально Центр Div

У меня есть всплывающее окно, которое содержит форму ASP.NET, щелкните ссылку "Запросить информацию" и появится форма.

Однако страницы, на которых есть ссылка "Запросить информацию", чтобы вызвать всплывающее окно, содержат много контента, поэтому для просмотра ссылки требуется прокрутка.

Мне нужно, чтобы div всегда центрировался, если пользователь прокручивает, чтобы читать содержимое, иначе, если они не будут прокручиваться, всплывающее окно по-прежнему появляется на экране.

div позиционируется абсолютно, вся ширина страницы 960px с пометкой 0 auto.

Ответ 1

Если div имеет фиксированную ширину и высоту, используйте: (если ширина = 120 пикселей и высота = 80 пикселей)

position: fixed;
top: 50%;
left: 50%;
margin-left: -60px; /* negative half of the width */
margin-top: -40px; /* negative half of the height */

Ответ 2

Использовать позицию: исправлено; для этого используйте 0 для верхнего, левого, правого и нижнего и дайте div display: table-cell; также, например, установка text-align: center; и выравнивание по вертикали: среднее; сделают все внутри внутри ровно посередине, без пиксельных точных хаков, таких как отрицательные поля.

Ответ 3

Если ваш popup div имеет фиксированный размер, вы можете использовать этот CSS:

position: fixed;
left: 0;
top: 0;
right: 0;
bottom: 0;
margin: auto; /* this requires a fixed size */

В противном случае вам придется играть с дисплеем: table-cell; и т.п.

Ответ 4

Это то, что вы пытаетесь сделать? http://jsfiddle.net/Hrwf8/

Ключ здесь состоит в том, чтобы установить левый и верхний стили на 50% и установить margin-left и top на отрицательное количество половины ширины и высоты div. Это, конечно, требует, чтобы у вас был фиксированный размер для вашего div.

Ответ 5

В вашем CSS:

.ClassCenter {
    position: absolute;
    left: 50%;
    top: 50%;
}

Источник: http://demo.tutorialzine.com/2010/03/centering-div-vertically-and-horizontally/demo.html