Що саме потрібно для "margin: 0 auto;" працювати?

Я знаю, що налаштування margin: 0 auto;на елемент використовується для його центрування (зліва-справа). Однак я знаю, що елемент та його батько повинні відповідати певним критеріям, щоб автоматичний запас працював, і я ніколи не можу отримати магію правильно.

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

Вгорі голови:

1. Елемент повинен бути на рівні блоку, наприклад, display: blockабоdisplay: table
2. Елемент не повинен плавати
3. Елемент не повинен мати фіксованого або абсолютного положення ¹

Зверху голови інших людей:

4. Елемент повинен мати a, 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 - корисна властивість відображення в цьому випадку, оскільки для нього не потрібно встановлювати ширину. (Я знаю, що цій посаді 5 років, але вона все ще стосується перехожих;)

У верхній частині голови моєї кішки переконайтеся, що divви не намагаєтесь зробити центрwidth: 100% .

Якщо це так, то важливими будуть правила, встановлені на дитячих дівах.

Перейдіть до цього швидкого прикладу, який я створив 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