Выравнивание — блок по вертикали

По поводу того, как выравнивать блок по вертикали написано масса материалов и статей, но самым простым способом является использование решения, которое будет работать везде. И все благодаря CSS 3.

Помимо свойства display: table появилось есть свойство display: table-cell и именно комбинацию этих двух свойств мы будем использовать.

Схема работы очень проста — создается главный блок со свойством display: table, а в нем создается еще один блок, но уже со свойством display: table-cell и эта конструкция ведет себя как обычная таблица — высота вложенного блока занимает все пространство, то есть в данном случае становится равной высоте родительского блока. При этом содержимое блока выравнивается по вертикали по центру, если нет указания на иное, в том числе и блоки.

Выравнивание блока по вертикали, код HTML:

<div class="main_block">
    <div>
        <div class="block">Выравнивание - блок по вертикали</div>
    </div>
</div>

Для наглядности окрасим родительский блок в красный, а дочерний в серый.

Выравнивание блока по вертикали, код CSS:

.main_block {
    display: table;
    width: 100%;
    height: 200px;
    background: #f00;
}
.main_block > div {
    display: table-cell;
    vertical-align: middle;
    background: #eee;
    height: 30px;
}
.block {
    background: #ccc;
}

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

Результат: блок по вертикали:

Разумеется, помимо этих основных моментов выровнять блок по вертикали потребуется еще указать высоту главного блока, если это будет необходимо. При данном варианте решения задачи выравнивания не придется «бороться» с Internet Explorer, как было бы, если бы использовалось свойство display:inline-block.

Данный метод является самым простым и компактным из всех существующих и работает везде.