Что, собственно, необходимо для "margin: 0 auto;" работать?

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

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

Ответ 1

Сверху моей головы:

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

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

Элемент должен иметь width, который не является auto ²

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

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

Ответ 2

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

Ответ 3

I сделал пример, чтобы вы могли видеть, что происходит, насколько я помню, это все, что вам нужно:)

Ответ 4

Полное правило:

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

Ответ 5

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

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

Ответ 6

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

Ответ 7

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

Ответ 8

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

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;

Ответ 9

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

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

Ответ 10

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