Чем отличается justify-content: center от margin: 0 auto?

Question

[Николай Угольников]

Чем отличается justify-content: center от margin: 0 auto?

Comments

[Ankhena]

justify-content: center выстраивает элементы по центру главной оси внутри флекса или по горизонтальной оси грида (для LTR-языков).
Направление оси может поменяться и вы получите совсем не то, на что рассчитывали изначально.
И элементов может быть много и они все встанут по центру.

margin: 0 auto задает автоматические горизонтальные отступы и при наличии заданной ширины поставит элемент по горизонтальному центру.

https://jsfiddle.net/u4p8w57c/

[Antony Bark]

Основная проблема justify-content: center, в том, что как и любой justify-content: воздействует на все элементы контейнера, переопределить общее правило у какого-либо элемента в таком контейнере крайне затруднительно. Удобнее использовать self-content: для элементов, оставив выравнивание родителя по умолчанию.
Если вы хотите выровнять элементы в контейнере, то margin: 0 auto применяется именно для элементов, а не для контейнера.