Вертикальное выравнивание всегда было проблемным местом в 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]-->