Вертикальное выравнивание всегда было проблемным местом в CSS, так как свойство vertical-align действует только на inline-элементы (состоящие из одной строки) и не работает с блочными элементами. Однако вертикальное выравнивание можно применить к ячейкам таблицы, таким образом мы можем использовать это в наших интересах в браузерах, которые поддерживают свойство display:table;, например в Mozilla и Opera.

Мы также можем приручить IE5-IE7 с помощью условных комментариев, написав для него отдельные правила вертикального центрирования.

Я сделал пример страницы, содержимое которой центрируется по вертикали и горизонтали.

Для начала я покажу что нужно сделать для Мозиллы. Вот листинг основной таблицы стилей:

* {margin:0;padding:0} /* mac hide \*/ html,body{height:100%;width:100%;} /* end hide */ body { background-color: #cccccc; text-align:center; min-height:468px;/* для правильных браузеров*/ min-width:552px;/* для правильных браузеров*/ } #outer{ height:100%; width:100%; display:table; vertical-align:middle; } #container { text-align: center; position:relative; vertical-align:middle; display:table-cell; height: 468px; } #inner { width: 552px; background:red; height: 468px; text-align: center; margin:0 auto; border:1px solid #000; }

Наш HTML код будет выглядеть так:

<body> <div id="outer"> <div id="container"> <div id="inner"> <h1>Отцентрированно по вертикали и горизонтали</h1> </div> </div> </div> </body>

Большинство из вышеупомянутого должно быть Вам знакомо, но нас интересует сейчас свойство display:table; в контейнере #outer. Именно оно говорит браузеру что надо отобразить блочный элемент с характеристиками, присущими таблицам. Это позволит нам использовать свойство vertical-align:center;. Далее мы обьявляем контейнер #container ячейкой таблицы (display:table-cell) и он отцентрируется вертикально относительно #outer.

Внутренний элемент #inner мы центрируем горизонтально с помощью свойства margin:0 auto;. Теперь Mozilla и Opera, отображают все так, как мы задумали. Конечно плохо что мы нуждаемся в дополнительных обертках, но это - самый безопасный способ решения задачи вертикального центрирования. Описанный мной метод всегда оставляет контент во вьюпорте, в отличие от других методов.

IE не понимает свойства display:table; и игнорирует его. Для того чтобы заставить его центрировать страницу по вертикали добавим на страницу код:

<!--[if IE ]> <style type="text/css"> #container{top:50%} #inner{top:-50%;position:relative;} </style> <![endif]-->

Вертикальное центрирование элементов неизвестной ширины и высоты

Два вышеописанных метода настолько хороши, что немного модифицировав наш код, мы получим решение для вертикального центрирования элементов с неизвестной шириной и высотой. Я не буду описывать модификации, а сразу приведу пример. Появились вопросы? Пишите комментарии!