Горизонтальное и вертикальное центрирование контейнера

Источник: webmagazine

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

 


Страница сайта http://test.interface.ru
Оригинал находится по адресу http://test.interface.ru/home.asp?artId=16229