Margin 0 auto что это

Центрирование горизонтальное и вертикальное

В CSS есть всего несколько техник центрирования элементов. Если их знать, то большинство задач решаются просто.

Горизонтальное

text-align

Для центрирования инлайновых элементов – достаточно поставить родителю text-align: center :

 .outer 
Для центрирования блока это уже не подойдёт, свойство просто не подействует. Например:
 .outer < text-align: center; border: 1px solid blue; >.inner 
margin: auto
Блок по горизонтали центрируется margin: auto :
 .outer < border: 1px solid blue; >.inner 
В отличие от width/height , значение auto для margin само не появляется. Обычно margin равно конкретной величине для элемента, например 0 для DIV . Нужно поставить его явно.
Значение margin-left:auto/margin-right:auto заставляет браузер выделять под margin всё доступное сбоку пространство. А если и то и другое auto , то слева и справа будет одинаковый отступ, таким образом элемент окажется в середине. Детали вычислений описаны в разделе спецификации Calculating widths and margins.
Вертикальное
Для горизонтального центрирования всё просто. Вертикальное же изначально не было предусмотрено в спецификации CSS и по сей день вызывает ряд проблем.
Есть три основных решения.
position:absolute + margin
Центрируемый элемент позиционируем абсолютно и опускаем до середины по вертикали при помощи top:50% :
 .outer < position: relative; height: 5em; border: 1px solid blue; >.inner 
Это, конечно, не совсем центр. По центру находится верхняя граница. Нужно ещё приподнять элемент на половину своей высоты.
Высота центрируемого элемента должна быть известна. Родитель может иметь любую высоту.
Если мы знаем, что это ровно одна строка, то её высота равна line-height .
Приподнимем элемент на пол-высоты при помощи margin-top :
 .outer < position: relative; height: 5em; border: 1px solid blue; >.inner 
Почему -0.625em ?
При стандартных настройках браузера высота строки line-height: 1.25 , если поделить на два 1.25em / 2 = 0.625em .
Конечно, высота может быть и другой, главное чтобы мы её знали заранее.
Можно аналогично центрировать и по горизонтали, если известен горизонтальный размер, при помощи left:50% и отрицательного margin-left .
Одна строка: line-height
Вертикально отцентрировать одну строку в элементе с известной высотой height можно, указав эту высоту в свойстве line-height :
 .outer 
Текст 
Это работает, но лишь до тех пор, пока строка одна, а если содержимое вдруг переносится на другую строку, то начинает выглядеть довольно уродливо.
Таблица с vertical-align
У свойства vertical-align, которое управляет вертикальным расположением элемента, есть два режима работы.
В таблицах свойство vertical-align указывает расположение содержимого ячейки.
Его возможные значения:
baseline Значение по умолчанию. middle , top , bottom Располагать содержимое посередине, вверху, внизу ячейки.
Например, ниже есть таблица со всеми 3-мя значениями:
 table < border-collapse: collapse; >td 
 
top
 
middle
 
bottom
 
 
Обратим внимание, что в ячейке с vertical-align: middle содержимое находится по центру. Таким образом, можно обернуть нужный элемент в таблицу размера width:100%;height:100% с одной ячейкой, у которой указать vertical-align:middle , и он будет отцентрирован.
Но мы рассмотрим более красивый способ, который поддерживается во всех современных браузерах, и в IE8+. В них не обязательно делать таблицу, так как доступно значение display:table-cell . Для элемента с таким display используются те же алгоритмы вычисления ширины и центрирования, что и в TD . И, в том числе, работает vertical-align :
 
Кнопка
с любой высотой
и шириной 
Этот способ замечателен тем, что он не требует знания высоты элементов.
Однако у него есть особенность. Вместе с vertical-align родительский блок получает табличный алгоритм вычисления ширины и начинает подстраиваться под содержимое. Это не всегда желательно.
Чтобы его растянуть, нужно указать width явно, например: 300px :
 
Кнопка
с любой высотой
и шириной 
Можно и в процентах, но в примере выше они не сработают, потому что структура таблицы «сломана» – ячейка есть, а собственно таблицы-то нет.
Это можно починить, завернув «псевдоячейку» в элемент с display:table , которому и поставим ширину:
 
 
Кнопка
с любой высотой
и шириной 
 
Если дополнительно нужно горизонтальное центрирование – оно обеспечивается другими средствами, например margin: 0 auto для блочных элементов или text-align:center на родителе – для других.
Центрирование в строке с vertical-align
Для инлайновых элементов ( display:inline/inline-block ), включая картинки, свойство vertical-align центрирует сам инлайн-элемент в окружающем его тексте.
В этом случае набор значений несколько другой:
Это можно использовать и для центрирования, если высота родителя известна, а центрируемого элемента – нет.
Допустим, высота внешнего элемента 120px . Укажем её в свойстве line-height :
  
Работает во всех браузерах и IE8+.
Свойство line-height наследуется, поэтому надо знать «правильную» высоту строки и переопределять её для inner .
Центрирование с vertical-align без таблиц
Если центрирование должно работать для любой высоты родителя и центрируемого элемента, то обычно используют таблицы или display:table-cell с vertical-align .
Если центрируются не-блочные элементы, например inline или inline-block , то vertical-align может решить задачу без всяких таблиц. Правда, понадобится вспомогательный элемент (можно через :before ).
 .before < display: inline-block; height: 100%; vertical-align: middle; >.inner 
 Центрированный
Элемент 

Перед центрируемым элементом помещается вспомогательный инлайн-блок before , занимающий всю возможную высоту.
Центрируемый блок выровнен по его середине.

Для всех современных браузеров и IE8 можно добавить вспомогательный элемент через :before :
 .outer:before < content: ''; display: inline-block; height: 100%; vertical-align: middle; >.inner < display: inline-block; vertical-align: middle; >/* добавим горизонтальное центрирование */ .outer 
 Центрированный
Элемент 
В пример выше добавлено также горизонтальное центрирование text-align: center . Но вы можете видеть, что на самом деле внутренний элемент не центрирован горизонтально, он немного сдвинут вправо.
Это происходит потому, что центрируется весь текст, а перед inner находится пробел, который занимает место.

Убрать лишний пробел между div и началом inner , будет .
Оставить пробел, но сделать отрицательный margin-left у inner , равный размеру пробела, чтобы inner сместился левее.

 .outer:before < content: ''; display: inline-block; height: 100%; vertical-align: middle; >.inner < display: inline-block; vertical-align: middle; margin-left: -0.35em; >.outer 
 Центрированный
Элемент 
Центрирование с использованием модели flexbox
Данный метод поддерживается всеми современными браузерами.
  
 Центрированный
Элемент 

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


Не поддерживается IE9-, IE10 поддерживает предыдущую версию flexbox.

Итого
Обобщим решения, которые обсуждались в этой статье.
Для горизонтального центрирования:

text-align: center – центрирует инлайн-элементы в блоке.
margin: 0 auto – центрирует блок внутри родителя. У блока должна быть указана ширина.

Для вертикального центрирования одного блока внутри другого:
Если размер центрируемого элемента известен, а родителя – нет
Родителю position:relative , потомку position:absolute; top:50% и margin-top:- . Аналогично можно отцентрировать и по горизонтали.
Если нужно отцентрировать одну строку в блоке, высота которого известна
Поставить блоку line-height: . Нужны конкретные единицы высоты ( px , em …). Значение line-height:100% не будет работать, т.к. проценты берутся не от высоты блока, а от текущей line-height .
Высота родителя известна, а центрируемого элемента – нет.
Поставить line-height родителю во всю его высоту, а потомку поставить display:inline-block .
Высота обоих элементов неизвестна.

Сделать элемент-родитель ячейкой таблицы при помощи display:table-cell (IE8) или реальной таблицы, и поставить ему vertical-align:middle . Отлично работает, но мы имеем дело с таблицей вместо обычного блока.


Решение со вспомогательным элементом outer:before и инлайн-блоками. Вполне универсально и не создаёт таблицу.
Решение с использованием flexbox.

Свойство margin
Свойство margin устанавливает пустое пространство от внешнего края border , padding или содержимого блока (рис. 1). Под margin нет своего фона и он принимает фон родительского элемента.

margin в основном используется для создания вертикальных и горизонтальных отступов между элементами. Аналогично другим блочным свойствам есть свойства для каждой стороны — margin-top, margin-right, margin-bottom и margin-left, соответственно устанавливающие отступ сверху, справа, снизу и слева. В примере 1 пространство между двумя вертикальными блоками задаётся с помощью свойства margin-bottom .
Пример 1. Расстояние между блоков
Результат данного примера показан на рис. 2.

Рис. 2. Расстояние между блоков
Значения margin
В качестве значений margin используются любые допустимые единицы длины, к примеру, пиксели, проценты, em, rem и др. В отличие от padding свойство margin может быть отрицательным (например: -10px), а также принимать значение auto . В остальном margin похоже на padding , у него также может быть от одного до четырёх значений.
Одно значение — определяет отступы для всех сторон блока.
margin: все стороны; margin: 10px;
Два значения — первое определяет отступы сверху и снизу для элемента, второе слева и справа для элемента.
margin: верх-низ лево-право; margin: 10px 20px;
Три значения — первое задаёт отступ сверху для элемента, второе одновременно слева и справа, а третье снизу.
margin: верх лево-право низ; margin: 10px 20px 5px;
Четыре значения — первое определяет отступ сверху, второе справа, третье снизу, четвёртое слева. Для запоминания последовательности можно представить часы — значения идут по часовой стрелке, начиная с 12 часов.
margin: верх право низ лево; margin: 5px 10px 15px 20px;
Значение auto
Свойство margin позволяет выравнивать элемент по центру горизонтали, если использовать значение auto и задать ширину элемента через width (пример 1).
Пример 2. Значение auto
Результат данного примера показан на рис. 3.

Рис. 3. Выравнивание блока по центру
Вместо margin: auto можно использовать комбинацию margin-left: auto и margin-right: auto .
Выравнивание блока по центру через значение auto работает только в сочетании с width .
Аналогично можно выровнять по центру горизонтали изображение, для этого даже не надо указывать ширину картинки, поскольку браузер получает её автоматически. Следует только превратить изображение в блочный элемент через свойство display, как показано в примере 3.
Пример 3. Значение auto

     

     
Результат данного примера показан на рис. 4.

Рис. 4. Выравнивание картинки по центру
Проценты
В качестве значения margin можно использовать процентную запись, с которой связаны следующие особенности.

По горизонтали проценты считаются от ширины всего блока.
По вертикали проценты считаются от ширины всего блока.

Таким образом, margin в процентах берётся от ширины всего блока, даже для margin-top и margin-botom .
Отрицательный margin
margin может быть задан с отрицательным значением, тем самым элемент сдвигается в противоположном направлении. К примеру, margin-top:-10px поднимает блок вверх на 10 пикселей, а margin-left:-10px сдвигает блок влево.
В примере 4 показан сдвиг блока с классом stat вверх, если он располагается сразу после элемента 
.
Пример 4. Использование отрицательного значения
Результат данного примера показан на рис. 5. Без отрицательного margin строки располагаются далеко друг от друга.

Рис. 5. Поднимаем блок вверх через margin-top
Обнуление margin
Для некоторых элементов браузер добавляет margin автоматически. Вот несколько примеров:

для по умолчанию margin задан как 8px;
для списков

,

, margin-top и margin-bottom заданы как 1em;
для и margin-left и margin-right заданы как 40px.

Эти margin , согласно макету, не всегда нужны, поэтому их можно обнулить, иными словами, задать для margin нулевое значение. В примере 5 показано обнуление margin для элемента , после чего элемент плотно прилегает к краям браузера.
Пример 5. Обнуление margin
     

  

Кря-кря

   
Результат данного примера показан на рис. 6.

Рис. 6. Обнуление margin у
Автор: Влад Мержевич

Последнее изменение: 05.08.2023
Сделайте таблицу, как показано на рис. 1. Ширина таблицы составляет 80% и она выровнена по центру. Обратите внимание, что содержимое третьей колонки выровнено по центру.

    

   

Название
Цвет
Твердость по Моосу
Формула


Алмаз
Белый
10
C


Рубин
Красный
9
Al2O3


Аметист
Голубой
7
SiO2


Изумруд
Зеленый
8
Be3Al2(SiO3)6


Сапфир
Голубой
9
Al2O3


   
Создайте веб-страницу, как показано на рис. 1.

    

   

ВТ


Солнечно

СР


Облачно

ЧТ


Дождливо


   
См. также

margin
margin в CSS
Абсолютное позиционирование
Блочные элементы
Выравнивание с помощью флексбоксов
Колесо для сокращённых свойств
Открываем блочную модель
Строчные элементы
Схлопывающиеся margin

Рецепты

Как выровнять таблицу по центру?
Как сделать обтекание картинки текстом?

Как работает margin: 0 auto?
Наверное извечный вопрос всех новичков - как же все таки работает margin 
Почитав справочники и форумы, перелопатив множество различных роликов, увы, я так и не смогла ответить на этот вопрос себе. 
Взываю к мастодонтам - как же мне все-таки отцентрировать блок? 
html 
         
jdsnvckjd
  
*,*::before, *::after < box-sizing: border-box; >.container

Вопрос задан более года назад
874 просмотра

1 комментарий
Простой 1 комментарий
вариантов куча - https://www.w3.org/Style/Examples/007/center.ru.html

Решения вопроса 2

Kkrit @Kkrit Автор вопроса
немного пошаманив с max-width и другими значениями ширины у меня получилось 
Не знаю, это магия какая-то, возможно, дело в основном в том, что мое окно не слишком широкоформатно и с открытой консолью как раз около 1200px и выходит ширины 
 
 
Ответ написан более года назад

Комментировать

Нравится Комментировать

Yulia Khavaeva @iamlorddop
margin просто задает отступы для блока. Ограничьте container определенной шириной (Например width: 1180px;) и потом тем что вы зададите блоку margin: 0 auto; означает что вы задаете сверху и снизу отступ ноль (первая цифра в margin), значение auto значит что вы центрируете блок. у margin это внешний отступ от блока 
margin: (сверху снизу) (справа слева); 
margin: справа слева снизу справа; 
margin: со всех сторон;
Ответ написан более года назад

Комментировать

Нравится Комментировать

Ответы на вопрос 2

В чем именно вопрос? 
Способов много. Ваш вариант работает, потому не могу понять в чем именно вопрос.
Ответ написан более года назад

Нравится 1  2 комментария

Kkrit @Kkrit Автор вопроса
проблема в том, что я не учитывала ширину своего окна при просмотре с открытой консолью в браузере 
в итоге, нажав f12 увидела свой результат 
это было смешно, т.к. я два дня пыталась выяснить эту аномалию 😀
margin
Устанавливает величину отступа от каждого края элемента. Отступом является пространство от границы текущего элемента до внутренней границы его родительского элемента (рис. 1).

Рис. 1. Отступ от левого края элемента
Если у элемента нет родителя, отступом будет расстояние от края элемента до края окна браузера с учетом того, что у самого окна по умолчанию тоже установлены отступы. Чтобы от них избавиться, следует устанавливать значение margin для селектора равное нулю.
Свойство margin позволяет задать величину отступа сразу для всех сторон элемента или определить ее только для указанных сторон.
Синтаксис
margin: [значение | проценты | auto] | inherit
Значения
Разрешается использовать одно, два, три или четыре значения, разделяя их между собой пробелом. Эффект зависит от количества значений и приведен в табл. 1.
Табл. 1. Зависимость от числа значений 


Число значений
Результат


1
Отступы будут установлены одновременно от каждого края элемента.


2
Первое значение устанавливает отступ от верхнего и нижнего края, второе — от левого и правого.


3
Первое значение задает отступ от верхнего края, второе — одновременно от левого и правого края, а третье — от нижнего края.


4
Поочередно устанавливается отступ от верхнего, правого, нижнего и левого края.


Величину отступов можно указывать в пикселах (px), процентах (%) или других допустимых для CSS единицах. Значение может быть как положительным, так и отрицательным числом.
auto Указывает, что размер отступов будет автоматически рассчитан браузером. inherit Наследует значение родителя.
HTML5 CSS2.1 IE Cr Op Sa Fx
        
 
  
Результат данного примера показан на рис. 2.

Рис. 2. Применение свойства margin
Объектная модель
[window.]document.getElementById(" elementID ").style.margin
Браузеры
Internet Explorer 6 в режиме совместимости (quirk mode) не поддерживает выравнивание блока по центру с помощью правила margin: 0 auto . Также в этом браузере наблюдается ошибка с удвоением значения левого или правого отступа для плавающих элементов, вложенных в родительские элементы. Удваивается тот отступ, который прилегает к стороне родителя. Проблема обычно решается добавлением display: inline для плавающего элемента.
Internet Explorer до версии 7.0 включительно не поддерживает значение inherit .
Примечание
У блочных элементов расположенных рядом друг с другом по вертикали наблюдается эффект схлопывания, когда отступы не суммируются, а объединяются между собой. Само схлопывание действует на два и более блока (один может быть вложен внутрь другого) с отступами сверху или снизу, при этом примыкающие отступы комбинируются в один. Для отступов слева и справа схлопывание никогда не применяется.
Схлопывание не срабатывает:

для элементов, у которых на стороне схлопывания задано свойство padding .
для элементов, у которых на стороне схлопывания задана граница;
на элементах с абсолютным позиционированием, т.е. таких, у которых position установлено как absolute ;
на плавающих элементах (для них свойство float задано как left или right );
для строчных элементов;
для .



Похожие публикации:

Гиперссылки могут нести угрозу безопасности что это
Как запустить exe на linux
Как запустить игру герои 3 в окне
Почему появляется голубой экран во время игры