can3p | Вертикальное выравнивание блоков текста в html

Проблема вертикального выравнивания появилась не сегодня, и общие решения ищутся уже давно. Поиск в гугле дает, например, это и это.

Последняя ссылка особенно полезна, т.к. дает хорошее решение, но только в случае если известна высота родительского окна. А что делать, если наоборот, неизвестна высота родительского блока (окна браузера), но не известна высота дочернего окна. Тоесть если дочерний блок сгенерировался короткий, то он должен форматироваться по центру окна, иначе он должен аккуратно располагаться на странице. Так же нужно, чтобы при изменении размеров окна все двигалось соответственно.

В целом основной трюк состоит в том, чтобы все-таки высоту задать, потому что после этого начинают работать все методы, завязанные на позиционировании или отступах. Если эти методы известны, то дальше можно не читать, а просто использовать следующий код:

html, body {
    height:100%;
    padding:0;
    margin:0;
}

Стоит заметить, что нужно указывать именно два тега, потому что в каждом из браузеров срабатывает либо на присутствие одного из них, либо только на оба сразу. Отступы обнулены, чтобы унифицировать вид во всех браузерах и убрать полосу прокрутки, которая норовит появиться.

После этого кратко о дальнейших действиях. Прежде всего мудро узнать, как с этим справляются ведущие порталы. В Яндексе не заморачивались с отступами и просто добавили внешнюю таблицу. А у таблиц, как известно, с вертикальным позиционированием все в порядке.

1. Табличный метод

Оборачиваем блоки, которые нужно выравнять в таблицу:

<table>
<tr>
    <td>
        <div>Дочерний блок</div>
    </td>
</tr>
</table>

Немного css для подсветки примера

table  {
   width: 100%;
   height: 100%;
}
 
div  {
   background: #ABC;
   height:100px;
}

Пример можно увидеть здесь.

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

2. Блочный метод

Здесь таблица уже не понадобится, но код для блока меняется.

div  {
   background: #ABC;
   margin: -100px 0 0 0;
   position: absolute;
   top: 50%;
   height: 200px;
}

Пример.

Как и видно из кода, вся соль в том, чтобы предварительно задать высоту родителького блока. Побочным косяком вылезает то, что при изменении размера блок начинает уезжать за экран, поэтому для нормальных браузеров задается свойство min-height, а для ослика делается его имитация.

Вообще для имитации min-height есть множество способов, в т.ч. средствами только css, но для такой структуры тегов, которая представлена в примере, подошел только один метод - скрипт из того сточника

Финальный вариент смотреть здесь.

Оригинал: http://blog.dpetroff.ru/tech/valign