Что делает auto в поле: 0 auto?

Ответ 1

Когда вы указали width на объект, к которому вы применили margin: 0 auto, объект будет расположен централизованно внутри родительского контейнера.

Указание auto, поскольку второй параметр в основном указывает браузеру автоматически определять левое и правое поля, которое он делает, устанавливая их одинаково. Это гарантирует, что левое и правое поля будут установлены одинакового размера. Первый параметр 0 указывает, что верхнее и нижнее поля будут установлены равными 0.

margin-top:0;
margin-bottom:0;
margin-left:auto;
margin-right:auto;

Поэтому, чтобы дать вам пример, если родительский элемент равен 100px, а дочерний элемент - 50px, то свойство auto будет определять, что существует 50px свободного места для обмена между margin-left и margin-right:

var freeSpace = 100 - 50;
var equalShare = freeSpace / 2;

Что даст:

margin-left:25;
margin-right:25;

Посмотрите на jsFiddle. Вам не нужно указывать ширину родителя, а только ширину дочернего объекта.

Ответ 2

auto: браузер устанавливает маржу. Результат этого зависит от браузера

margin: 0 auto указывает

* top and bottom margins are 0
* right and left margins are auto

Ответ 3

Из спецификации CSS на Вычисление ширины и полей для блоков, не замененных элементов в нормальном потоке:

Если оба "margin-left" и "margin-right" являются "auto", их используемые значения равны. Это горизонтально центрирует элемент по краям содержащего блока.

Ответ 4

margin:0 auto;

0 для верхнего и нижнего и auto для левого-правого. Это означает, что левое и правое поле будет иметь автоматический запас в соответствии с шириной элемента и шириной контейнера.

Как правило, если вы хотите поместить любой элемент в центральное положение, тогда margin:auto работает отлично. Но он работает только в элементах блока.

Ответ 5

margin-top:0;
margin-bottom:0;
margin-left:auto;
margin-right:auto;

0 для верхнего и нижнего и автоматического для левого-правого. Браузер устанавливает маржу.