По поводу того, как выравнивать блок по вертикали написано масса материалов и статей, но самым простым способом является использование решения, которое будет работать везде. И все благодаря 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.
Данный метод является самым простым и компактным из всех существующих и работает везде.