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

Опубликовано 13.12.2007 22:00 пользователем Mike Khasaya

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

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

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

Теги:

Поделись с друзьями:

Войдите или зарегистрируйтесь, чтобы отправлять комментарии

Тормоз

14.12.2007

Постоянная ссылка (Permalink)

А если высота известна, то можно ещё проще делать :)

Войдите или зарегистрируйтесь, чтобы отправлять комментарии

Mike Khasaya

14.12.2007

Постоянная ссылка (Permalink)

А Вы уверены что контент не вылезет из вьюпорта если страница развернута не на весь экран? Мне вот кажется, что он уедет за пределы видимой области, хотя можно поробовать поставить свойство min-height и хак для IE 6 ;-)

Войдите или зарегистрируйтесь, чтобы отправлять комментарии

Тормоз

14.12.2007

Постоянная ссылка (Permalink)

Ну естественно вылезет, если высота окна будет меньше 200 пикселей :) А вообще, пример оттестирован, работает на нескольких сайтах.

Войдите или зарегистрируйтесь, чтобы отправлять комментарии

Nikita

15.12.2007

Постоянная ссылка (Permalink)

Делаем так и не паримся. И ничего никуда не вылезет.
Если нужна динамическая высота - паримся.

Войдите или зарегистрируйтесь, чтобы отправлять комментарии

Mike Khasaya

15.12.2007

Постоянная ссылка (Permalink)

Для динамической высоты не надо париться, я все уже расписал!

Войдите или зарегистрируйтесь, чтобы отправлять комментарии

Василий

28.06.2008

Постоянная ссылка (Permalink)

А как быть если внутри блока inner нужно вставить еще один блок, допустим inner2. И в inner2 вставить inner3, и все их центрировать по вертикали?

Войдите или зарегистрируйтесь, чтобы отправлять комментарии

Павел

08.07.2008

Постоянная ссылка (Permalink)

Народ! Эти примеры очень сильно глючат в злосчастном IE7. Выходил из положения элементарно с помощью одной таблицы:

Проверял в FF, Opera, IE 6-7 везде работало. По моему и кода меньше. Разве не так?

Войдите или зарегистрируйтесь, чтобы отправлять комментарии

Макс

18.08.2008

Постоянная ссылка (Permalink)

Павел, не позорьтесь. Добавьте DOCTYPE и увидите что ваш пример не работает в IE7. Надо переходить на верстку по стандартам!

Войдите или зарегистрируйтесь, чтобы отправлять комментарии

Alex

13.11.2008

Постоянная ссылка (Permalink)

Статья замечательная, большое спасибо!
Действительно работает почти (об этом чуть позже) во всех браузерах даже тогда, когда размер окна браузера меньше размеров центрируемого DIVа, что исключает использование метода, предложенного Никитой.
Теперь о "почти". В IE 8 без включения режима совместимости не работает, т.к. читается условный комментарий: <!--[if IE ]>... . Поэтому считаю, что его надо было бы уточнить: <!--[if lt IE 8]>... А в остальном, прекрасная маркиза, все хорошо :)