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?