Горизонтальное центрирование блока средствами 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 :

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


  2. Victor Gr. :

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

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

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

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

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

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


  3. void :

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

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


  4. 24 :

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


  5. 24 :

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


  6. Баранов Андрей :

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


  7. Busla :

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


  8. Фильчушкин Михаил :

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

    контент

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


  9. Фильчушкин Михаил :

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

    <table style="width:100%;">
    <tr>
    <td></td>
    <td> style="width:нужное значение в процентах или пикселах"> контент </td>
    <td></td>
    </tr>
    </table>


  10. Артем :

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


  11. Фильчушкин Михаил :

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


  12. snigga :

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


  13. FoX :

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



22 queries 0.192 seconds.