Центрирование страницы в CSS (не обижая IE6)

17.12.2009

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

Способы будем рассматривать на следующем примере HTML-разметки:

<html>
<body>
   <div id=”container”>
   </div>
</body>
</html>

Основной способ центрирования выглядит следующим образом:

<style>
   #container { margin: 0 20%;}
</style>

Свойство margin устанавливает боковые отступы размером в 20% от ширины окна браузера. В результате мы получаем блок container, шириной в 60% от ширины окна браузера, центрированный посередине.

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

Для этих целей можно использовать наиболее распространённый способ:

<style>
   #container { margin: 0 auto;}
</style>

В данном случае, для указания боковых отступов, мы используем значение auto свойства margin. В результате мы получаем центрированный блок с фиксированной шириной. Но, к сожалению, данный способ не поддерживается браузером IE6 (в режиме совместимости). Поэтому, рассмотрим пару альтернативных способов центрирования, лишённых этого недостатка.

Первый альтернативный способ: применить к селектору body свойство text-align со значением center:

<style>
   body {text-align: center;}
</style>

В результате мы получаем кроссбраузерное центрирование страницы, единственным недостатком которого ялвяется наследственное центрирование, применяемое ко всем дочерным элементам. Исправляется этот недостаток элементарно: элементу container приписываем свойство text-align со значением left. Таким образом достигается хорошая совместимость со старыми версиями браузеров.

Второй альтернативный способ выглядит немного интереснее:

<style>
   #container {
      position: absolute;
      left: 50%;
      width: 800px;
      margin-left: –400px;
   }
</style>

Устанавливаем для нашего блока абсолютное позиционирование (position: absolute), делаем отступ слева на половину ширины экрана (left: 50%), и сдвигаем наш container на половину собственной ширины влево (margin-left: –400px). В результате получаем центрированный блок, корректно воспринимаемый всеми популярными браузерами, включая легендарный IE6.

Бонусное видео: