Какой самый чистый способ центрировать div абсолютно (H + V) внутри окна браузера?

Question

Мне нужно создать веб-страницу с простым содержанием (логотип и текст), который будет отображаться в центре окна браузера.Как мне лучше всего достичь этого эффекта, ориентируясь на современные веб-браузеры?

Answer 1

Вот очень простое решение. Я не принимаю кредит на это:

http://www.infinitywebdesign.com/research/cssverticalcentereddiv.htm

Работает очень хорошо для простой body> div ситуации, подобной вашей.

Ваш другой вариант, хотя я боюсь последствий от некоторых ненавистников таблиц здесь, вы можете заключить div в таблицу и использовать свойство vertical-align:middle, чтобы позаботиться о вертикальном выравнивании без JavaScript. Затем используйте поле: 0 авто; на div для обработки горизонтального центра.

Answer 2

вы можете поместить свой контент в div и обеспечить высоту и ширину для этого div, а затем применить этот простой CSS, как u, примененный width как 300px и height как 300px ::

div {
position: absolute;
top: 50%;
left: 50%;
margin: -150px 0 0 -150px;
}

, тогда он всегдабыть в центре и убедиться, что вы использовали правильный DOCTYPE.

Answer 3

Если вы знаете размеры элемента (выполните математические расчеты для значений):

position: absolute;
left: 50%;
top: 50%;
width: ($WIDTH)px;
height: ($HEIGHT)px;
margin: (-$HEIGHT/2)px 0 0 (-$WIDTH/2)px;

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