Выровнять контейнер вертикально

Question

Я бы хотел выровнять мой контейнерный блок по центру по вертикали, как будто он выравнивается по горизонтали из-за margin: auto;.Я некоторое время искал в Google, как это сделать, но, похоже, он не работает для меня.Может быть, есть какой-то универсальный способ сделать это, такой же простой, как margin: auto; метод горизонтального центрирования?Потому что мне кажется очень странным, что мы живем в 2011 году, и до сих пор нет простой команды css для выполнения этой задачи ...

#container
{
    margin: auto;
    width: 960px;
    height: 640px;
    background-color: brown;
}

Answer 1

Есть тонн учебников для вертикального выравнивания, особенно для IE, который требует особого внимания.Один из них: Вертикальный центр контента с CSS .Также еще один ответ здесь .

Answer 2

Если ваш div имеет фиксированную высоту, вы можете выровнять его по вертикали, добавив еще один div (с плавающей точкой) с отрицательным полем (половину высоты основного div), а затем измените CSS вашего div (добавив clear).

Также не забудьте указать 100% высоту html и body, без этого это не сработает.

Вот так:

CSS :

html {
    overflow: auto;
}
html, body {
    margin:0;
    padding:0;
    height:100%;
}
#alignDiv {
    float:left;
    height:50%;
    margin-bottom:-320px; /* half the centered div */
    width:1px;
}
#container
{
    margin: 0 auto;
    width: 960px;
    height: 640px;
    background-color: brown;
    clear:left; /* without the clear it won't center */
}

html :

<div id="alignDiv"></div>
<div id="container"></div>

Answer 3

Может ли быть еще проще ...

html, body {
    overflow:hidden
}
#container {
    width:960px;
    height:640px;
    position:absolute;
    top:50%;
    left:50%;
    margin-top:-320px;
    margin-left:-480px;
    background:brown
}

overflow:hidden - скрыть появившуюся полосу прокрутки (html для IE6 и body для IE5).Я не знаю, почему это происходит.

Но если вы хотите сохранить прокрутку, если окно браузера меньше, просто установите высоту 639px и удалите overflow:hidden.