Este ejercicio básico publicado en BFE.dev nos ayuda a entender las diferentes formas de aplicar CSS para obtener el resultado deseado.

Caso: En base a la estructura HTML siguiente centrar el element div verticalmente.

<div class="outer">
  <div class="inner">
</div>

Solución 1: Usando grid

.outer {
  width: 100%;
  height: 100%;
  background-color: #efefef;

  display: grid;
  place-items: center;
}

.inner {
  width: 100px;
  height: 100px;
  background-color: #f44336;
}

Solución 2: Usando flexbox

.outer {
  width: 100%;
  height: 100%;
  background-color: #efefef;

  display: flex;
  align-items: center;
  justify-content: center;
}

.inner {
  width: 100px;
  height: 100px;
  background-color: #f44336;
}

Solución 3: método tradicional

.outer {
  width: 100%;
  height: 100%;
  background-color: #efefef;
}

.inner {
  width: 100px;
  height: 100px;
  background-color: #f44336;

  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}