Работает ли margin: 0 auto только по горизонтали

Что проверяют

Понимаете ли вы, откуда берётся центрирование, или заучили рецепт. Хороший ответ показывает, что вы знаете условия, при которых auto вообще что-то вычисляет, и помните, что в разных схемах раскладки правило разное.

Как отвечать

В обычном потоке да, только по горизонтали. Для блочного элемента браузер решает уравнение ширины: если левый и правый отступы заданы как auto, остаток свободного места делится поровну, и элемент встаёт по центру. По вертикали такого уравнения нет, margin-top: auto и margin-bottom: auto в потоке просто превращаются в ноль.

Чтобы это сработало, нужны три условия: элемент блочный, его ширина ограничена (width, max-width, содержимое уже контейнера), и он не вынут из потока через float.

Дальше назовите места, где правило другое:

.parent { display: flex; height: 300px; }
.parent > .child { margin: auto; }

• во флексбоксе и гриде auto съедает свободное место по обеим осям, поэтому такой элемент центрируется и по вертикали;
• у абсолютно позиционированного элемента с заданными top, bottom, left, right и ограниченными размерами margin: auto тоже работает вертикально;
• при вертикальном режиме письма оси меняются местами, и слово «горизонтально» перестаёт быть точной формулировкой.

Где спотыкаются

Ставят правило строчному элементу. У span или у ссылки своей ширины нет, отступы auto схлопываются в ноль, и ничего не происходит, пока не появится display: block или inline-block с шириной.

Второе: забывают ограничить ширину. Блок по умолчанию занимает всю доступную строку, свободного места не остаётся, делить нечего, и центрирования не видно.

Третье: путают с text-align: center. Это правило выравнивает содержимое внутри блока, а сам блок остаётся на месте; margin: 0 auto наоборот двигает блок, не трогая то, что внутри него.