Горизонтальное центрирование блока средствами CSS

Приведем несколько примеров горизонтального центрирования блока на странице. C помощью "margin:0 auto;" и с помощью отрицательных значений margin.

C помощью margin: 0 auto;

Блок центрируется установкой размеров правого и левого margin в "auto". Это отличный способ горизонтального центрирования блока средствами CSS. Он замечательно работает в большинстве браузеров, поддерживающих CSS2. Но IE5/Win не отреагирует на это свойство, это недостаток браузера, а не технического приема.

Это легко обходится — IE5/Win неправильно применяет свойство "text-align" к элементам уровня блока. Объявим "text-align:center" элементу, в котором центрируем блок (чаще всего это body) и проблема для IE5/Win казалось бы решена. Побочный эффект этого трюка — наследование свойств "text-align" для inline-контента. Отцентрованному блоку теперь объявим "text-align:left" и таким образом приведем верстку в порядок.


body {
 text-align:center;
 }
 
#Content {
 width:40%;
 margin:0px auto;
 text-align:left;
 border:1px solid #F60;
 background-color:#EEE;
 }
Bот пример центрирования блока с помощью "margin:0 auto;".

С помощью отрицательного значения margin

Сперва левый край блока размещаем по центру с помощью "position:absolute; left:50%;". Затем значение левого margin устанавливаем равным половине ширины блока и делаем его отрицательным: "margin-left:-266px;".


#Content {
 position:absolute;
 left:50%;
 width:200px;
 margin-left:-100px;
 border:1px solid #F60;
 background-color:#EEE;
 }
Bот пример центрирования блока с помощью "margin: -100px;".

Размеры блока не обязательно должны быть фиксированными. Можно их задавать в процентах, но при том же условии для "margin-left" тогда код будет таким:


#Content {
 position:absolute;
 left:50%;
 width:40%;
 margin-left:-20%;
 border:1px solid #F60;
 background-color:#EEE;
 }
Bот пример центрирования блока с помощью "margin: -20%;".

?спользуя вышеприведенные примеры и изменяя значения margin слева и справа можно разместить блок не строго по-центру, а смещая его вправо или влево от центра.



Много комментариев (13) к “Горизонтальное центрирование блока средствами CSS”

  1. Konstantin :

    ?нтересно, как отцентровать таблицу если она не имеет фиксированной и процентной ширины?


    2005-11-16 at 6:15 pm
  2. Victor Gr. :

    Начинаю облагораживать код своего сайта. Переводить его на div-ы, упрощать, оптимизировать.

    Пол дня провозился с центрированием картинки :)
    Заключать её в div было совершенно нецелесообразно! Это ведь была обычный img , которая должна была стоять в центре документа.

    text-align: center к ней не применялся.
    horizontal-align – тоже нет.
    align – нет.

    Перепробовал кучу вариантов, разные DOCTYPE…

    В конце концов, плюнул, заключил в … :)

    А ведь так не хотелось плодить лишние сущности!
    Это я всё к тому, что этот тег центрирует. ? всё тут :) Никаких CSS-ов на это дело не нужно.


    2006-02-02 at 4:02 pm
  3. void :

    2Victor Gr.:
    если картинка, допустим, находится в

    , тогда пишем в стиле css
    div#center img { align: center }
    и картинка отцентрована.


    2006-03-24 at 2:55 pm
  4. 24 :

    void, не работает


    2006-06-27 at 3:57 pm
  5. 24 :

    http://validator.w3.org/check?uri=http%3A%2F%2Fhotibo.ru%2F2005%2F05%2F06%2Fhorizontal_centerbox%2F


    2006-06-27 at 4:04 pm
  6. Баранов Андрей :

    24, спасибо, теперь проходит валидацию.
    Для тех, кто не заметил – отсутствовал fieldset и элементы формы (label, input…) находились только внутри form, а также одна br болталась вне блочного элемента. Как документ XHTML1.1 страница не проходила валидацию.


    2006-06-27 at 9:23 pm
  7. Busla :

    Можно сразу указать relative, а не оборачивать им absolute.


    2006-08-07 at 12:34 am
  8. Фильчушкин Михаил :

    Под стандарт XHTML 1.1 вариант с margin:auto применительно к таблицам не прокатил ))), а требовалась именно табличная вёрстка. Придумал так:

    контент

    Крайние ячейки не имеют заданных значений, а ширина таблицы – 100%, т.о. центрирование достигается за счёт расширения левой и правой ячеек до нужных величин. Кроссбраузерно, валидно, поддерживает и процентную и фиксированную ширину.


    2007-02-04 at 3:55 pm
  9. Фильчушкин Михаил :

    Блин, код не показался. Тогда ещё раз, применяя сущности, заместо угловых скобок:







    style="width:нужное значение в процентах или пикселах"> контент


    2007-02-04 at 4:02 pm
  10. Артем :

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


    2007-05-31 at 4:51 pm
  11. Фильчушкин Михаил :

    При стандарте XHTML 1.0 Transitional для таблицы возможно применение параметра align=”center”, однако для XHTML 1.0 Strict или для XHTML 1.1 это портит валидацию. Ещё вариант – применение JavaScript. Но при рендеринге IE сильно мерцает при пересчёте значений размеров окна.


    2007-06-14 at 11:52 pm
  12. snigga :

    А есть такой вариант. Создаётся тарблица, одна строка и три ячейки. Правой и левой задаётся ширина 50%. А центральная без размера. ? по мере её наполнения боковые будут меняться симметрично.


    2007-06-20 at 6:14 pm
  13. FoX :

    Здравствуйте, как мне отцентрировать меню сайта через css? зайдите на мой сайт, и вы поймете!
    Заранее благодарен


    2008-05-27 at 12:22 am