Что именно нужно для «margin: 0 auto;» работать?

Я знаю, что настройка margin: 0 auto;элемента используется для его центрирования (слева направо). Тем не менее, я знаю, что элемент и его родительский элемент должны соответствовать определенным критериям для работы автоматического запаса, и я никогда не смогу понять магию правильно.

Поэтому мой вопрос прост: какие свойства CSS должны быть установлены для элемента и его родителя, margin: 0 auto;чтобы левее-правее центрировать дочерний элемент ?

С верхней части моей головы:

1. Элемент должен быть на уровне блока, например, display: blockилиdisplay: table
2. Элемент не должен плавать
3. Элемент не должен иметь фиксированной или абсолютной позиции ¹

Вне головы других людей:

4. Элемент должен иметь значение widthне auto²

Обратите внимание, что все эти условия должны выполняться для элемента, центрированного для его работы.

¹ _{Есть одно исключение: если ваш фиксированный или абсолютно позиционированный элемент имеет left: 0; right: 0, он будет центрироваться с автоматическими полями .}

² _{Технически, margin: 0 autoработает с автоматической шириной, но автоматическая ширина имеет приоритет над автоматическими полями, и в результате автоматические поля обнуляются, в результате чего создается впечатление, что они «не работают».}

С макушки головы, это нужно width. Вам необходимо указать ширину контейнера, который вы центрируете (не родительскую ширину).

Полное правило для CSS:

1. ( display: blockИ widthне авто) ИЛИdisplay: table
2. float: none
3. position: relative

Вне головы, если элемент не является блочным элементом - сделайте это так.

а затем дать ему ширину.

Он также будет работать с display: table - полезное свойство display в этом случае, потому что не требует установки ширины. (Я знаю, что этому посту 5 лет, но он все еще актуален для прохожих;)

От головы моей кошки, убедитесь, что divвы пытаетесь отцентрировать не установлен width: 100%.

Если это так, то правила, установленные для дочерних элементов div, будут иметь значение.

Пожалуйста, перейдите к этому быстрому примеру, я создал jsFiddle . Надеюсь, это легко понять. Вы можете использовать wrapperdiv с шириной сайта для выравнивания по центру. Причина, по которой вы должны указать, widthзаключается в том, что браузер знает, что вы не собираетесь использовать жидкую компоновку.

Вот мое предложение:

First: 
      1. Add display: block or table
      2. Add position: relative
      3. Add width:(percentage also works fine)
Second: 
      if above trick not works then you have to add float:none;

Возможно, интересно, что вам не нужно указывать ширину для <button>элемента, чтобы он работал - просто убедитесь, что он имеет display:block: http://jsfiddle.net/muhuyttr/

Для тех, кто только что задал этот вопрос и не может его исправить margin: 0 auto, вот что я обнаружил, вы можете найти полезным: tableэлемент без заданной ширины должен иметь display: tableи не display: block для того, margin: autoчтобы выполнять работу. Это может быть очевидным для некоторых, так как комбинация display: blockи widthзначение по умолчанию даст таблицу, которая будет расширена для заполнения ее контейнера, но если вы хотите, чтобы таблица приняла ее «естественную» ширину и была отцентрирована, вам нужноdisplay: table