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

				
					<div class="contenedor">
    <div class="elemento"></div>
</div>

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

Entradas relacionadas

Facebook
Twitter
LinkedIn

Nuevas/ publicaciones

ir al blog

Nuevas/ publicaciones