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%);
}