Как правильно использовать margin: 0 auto;?

Question

[Александр К]

Здравствуйте, я обучаюсь навыкам верстки и столкнулся с таким вопросом - когда применяют margin: 0 auto?

Расскажите, в каких ситуациях это применяют, так как до сих пор не понимаю, почему в некоторых случаях этот прием не работает.

Буду очень благодарен, если кто-то откроет мне глаза на это.

Answer 1

[jurasarts]

Этот прием не работает, если элемент не блочный или у него не указана ширина.

Comments

[pwuforra]

это синтаксическое сокращение.
это значит:
margin: 0 auto 0 auto;
то есть:
margin: 0 (top) auto (right) 0 (bottom) auto (left);
по этому:
margin: 0 (top, bottom) auto (right, left);

Answer 2

[mrvorazan]

Вот тут есть про это

Answer 3

[Seva Sargsyan]

Выравнивает div по центру

Answer 4

[Александр N++]

Когда нужно блочный элемент отобразить по центру в другом контейнере

Ситуации простые нужно показать div600 x 400 по центру.
Центровка контейнера по центру

Answer 5

[Виталий Желтяков]

Применяют его для выравнивания тела сайта (body) по горизонтали по центру.

С этим приёмом есть проблемы - JS может не верно вычислять смещение по x-координатам, если неправильно используется стиль position.

Comments

[habrdima]

@Виталий Желтяков поясни?

Answer 6

[mrvorazan]

margin:auto справляется со своей задачей в браузерах Firefox, Opera, Chromium, Google Chrom и во многих других браузерах. Но в браузере Internet Explorer (IE<8) margin:auto не выравнивает блок по центру.

Для совместимости сайта с браузером IE, в стиль отцентрированного элемента можно добавить инструкцию text-align:center;

#main div{
    display: block;
    margin: 0 auto 0 auto;
    text-align: center;
}