Centrar contenido vertical y horizontalmente con CSS

A la hora de centrar un elemento con CSS de forma vertical y horizontalmente con respecto a su contenedor padre tenemos diferentes formas de conseguirlo y utilizar una opción u otra dependerá del objetivo que tengamos ya que todas son válidas y correctas dependiendo de su uso.

En cuanto a la estructura del documento necesitaremos un elemento contenedor que incluirá los elementos que irán centrados.

HTML

CSS

Con Grid Layout

.contenedor{ display: grid
}
.elemento{ align-self: center; justify-self: center;
}

Con Flex Layout

Opción 1

Esta es mi opción preferida ya que no hace falta referirnos a los elementos contenidos. Solamente necesitamos indicarle al contenedor padre cómo han de comportarse sus hijos.

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

Opción 2

.contenedor{ display: flex; }
.elemento{ margin: auto;
}

Con Position

Hay personas que lo ven como una opción sucia o vieja para esta tarea pero lo cierto es que si necesitamos trabajar con superposición de capas sigue siendo útil.

.contenedor{ position:relative
}
.elemento{ position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%);
}