Какой самый простой метод для вертикального + горизонтального центрирования div в окне?

Question

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

Меня интересует последний Firefox (нет необходимости в взломах IE).

Только CSS, пожалуйста, без Javascript.

Answer 1

Расположите его на 50% от окна / родительского контейнера и используйте отрицательный размер поля, равный половине ширины / высоты элементов:)

position: absolute; // or fixed if you don't want it scrolling with the page.
width: 300px;
height: 200px;
left: 50%;
top: 50%;
margin-left: -150px;
margin-top: -100px;

Возможно, вам потребуется установить height: 100% на body и html

html, body {
    height: 100%;
}

Редактировать: Вот рабочий пример .

Answer 2

Я не знаю, является ли это самым простым способом, но, похоже, он работает.

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

Answer 3

Без поддержки IE это на самом деле довольно легко сделать, используя display: table и display: table-cell.

Вот обновление вашего HTML:

<div id='my_div'>
    <div class="centered">this is vertically centered</div>
</div>

CSS:

body, html
{
    height: 100%;
}
body
{
    margin: 0;
    padding: 0;
    border: 1px solid blue;
}
#my_div
{
    width: 300px;
    border: 1px solid red;
    margin-left: auto;
    margin-right: auto;
    height: 100%;
    display: table;
    overflow: hidden;
}
.centered
{
    display: table-cell;
    vertical-align: middle;
    text-align: center;
}

И для предварительного просмотра: http://jsfiddle.net/we8BE/

Answer 4

Самый простой? Один из многочисленных jQuery center плагинов доступных ...

Answer 5

Какие методы вы открыты для использования? Например CSS до какого уровня - 2 или 3? Javascript? JQuery? Моя первая мысль заключается в том, что, поскольку div можно центрировать по горизонтали через margin-left: auto; и margin-right: auto;, возможно, попробуйте margin: auto; для всех 4 сторон. Дайте мне знать, если это работает.