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