ентрирования по горизонтали и вертикали одновременно есть два простых варианта:

Первый

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

второй

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

Какая разница? В каких ситуациях мы будем использовать один над другим?