Как использовать свойство margin-auto для центрирования блоков?

Свойство margin: auto в CSS позволяет горизонтально центрировать блочные элементы относительно родительского контейнера. skyeng.ru ru.hexlet.io Оно автоматически вычисляет отступы слева и справа, распределяя доступное пространство поровну между краями элемента. skyeng.ru

Основной синтаксис для центрирования выглядит так: .block {margin: auto; width: 300px; }. skyeng.ru

Обязательные условия для работы свойства:

• Элемент должен иметь фиксированную ширину (width). skyeng.ru
• Элемент должен быть блочным (display: block). skyeng.ru
• Родительский контейнер должен быть шире дочернего. skyeng.ru

Некоторые ограничения свойства:

• Не работает с инлайновыми элементами (span, a, strong). skyeng.ru
• Не выравнивает по вертикали — значение auto игнорируется для margin-top и margin-bottom. skyeng.ru

Пример кода, в котором блочный элемент с фиксированной шириной 50% будет выравниваться по центру: .block { width: 50%; margin: 0 auto; }. ru.hexlet.io