Qual é a diferença entre a margem: automático e centro de justificar conteúdo / alinhar itens?

Para centralizar horizontal e verticalmente simultaneamente, há duas opções simples:

Primeiro

.outer {
  display:flex;
}
.inner {
  margin:auto;
}

Segundo

.outer {
  display: flex;
  justify-content: center;
  align-items: center;
}

Qual é a diferença? Em que situações usaríamos um sobre o outro?

questionAnswers(1)

yourAnswerToTheQuestion