Centrar elementos vertical y horizontal con css

¿Problemas para centrar elementos con el CSS? Parece más sencillo cuando conocemos las medidas en pixeles, ¿Verdad?, cuando tenemos que modificar un código de un proyecto en producción la cosa se complica un poco, si el centrado es horizontal y además sobre un elemento con medidas expresadas en porcentajes la cosa se va complicando un poco más.

Existen varias formas de centrar un elemento, tanto horizontal como verticalmente, en este tutorial vamos a ver distintas formas de hacerlo, vamos a complicarlo un poco más creando una pila de elementos unos dentro de otros.

El código HTML

<div class="padre">
	<div class="descendiente_1">
		<div class="descendiente_2"></div>
	</div>
</div>

Para centrar un elemento horizontalmente podemos asignar la propiedad margin y asignarle el valor 0 auto, pero en proyectos muy extensos con muchas clases y elementos vamos a necesitar algo más avanzado.

Tenemos tres contenedores uno dentro de otro, hemos asignado las clases padre para el contenedor principal y descendiente_ seguido del nivel de jerarquía al que pertenece para una mejor comprensión.

Si tenemos las medidas en pixeles en el CSS es muy sencillo centrar el elemento, tan solo tenemos que aplicar una sencilla fórmula:

Desplazamiento mitad horizontal
Ancho contenedor padre – Ancho contenedor hijo : 2

Desplazamiento mitad vertical
Alto contenedor padre – Alto contenedor hijo : 2

En el siguiente ejemplo vamos a visualizar solamente el elemento hijo de primer nivel.

Ejemplo

.padre {
	background-color: #888888;
	width: 150px;
	height: 150px;
	position: relative;
}
.descendiente_1 {
	background-color: #a1cc3a;
	width: 100px;
	height: 100px;
	top: 25px;
	left: 25px;
	position: absolute;
}

Desplazamiento mitad horizontal
150px – 100px : 2 = 25px

Desplazamiento mitad vertical
150px – 100px : 2 = 25px

IMPORTANTE

El contenedor hijo debe tener posición absoluta respecto a su contenedor padre, y así sucesivamente por cada contenedor que insertemos, por lo que para visualizar los tres contenedores debemos asignar al siguiente elemento descendiente posición absoluta respecto a su contenedor padre, el primer elemento padre (el más alto en nivel de jerarquía) será el que tenga posición relativa respecto a todos sus descendientes:

Ejemplo

.padre {
	background-color: #888888;
	width: 150px;
	height: 150px;
	position: relative;
}
.descendiente_1, .descendiente_2 {
	top: 25px;
	left: 25px;
	position: absolute;
}
.descendiente_1 {
	background-color: #a1cc3a;
	width: 100px;
	height: 100px;
}
.descendiente_2 {
	background-color: #CCCCCC;
	width: 50px;
	height: 50px;
}

Porcentajes

El código anterior es perfectamente válido pero no cumple las pautas de diseño “Responsive Design” que debe tener una página web en la actualidad, veamos ahora un CSS con porcentajes en el ancho de los elementos y diferentes alturas en cada uno de ellos:

.padre, .descendiente_1, .descendiente_2 {
	width: 50%;
}
.padre {
	background-color: #888888;
	height: 150px;
	position: relative;	
}
.descendiente_1, .descendiente_2 {
	left: 50%;
	top: 50%;
	transform: translate(-50%, -50%);
	position: absolute; 
}
.descendiente_1 {
	background-color: #a1cc3a;
	height: 130px;
}
.descendiente_2 {
	background-color: #CCCCCC;
	height: 30px;
}

En este caso no importa la altura de los elementos, estos se situarán en el centro tanto vertical como horizontalmente.

Que es igual que en el ejemplo con pixeles

En los dos ejemplos el contenedor padre tiene posición relativa respecto a sus elementos descendientes y los elementos descendientes tienen posición absoluta respecto a su contenedor padre.

Que es diferente del ejemplo con pixeles

Hemos asignado un desplazamiento del 50%, con ello sobrepasamos el desplazamiento en un 50% sobre el 50% asignado asi que utilizamos la propiedad transform para “trasladar” el elemento un 50% menos sobre el 50% asignado, total 25%, quedando el 25% restante a la derecha y abajo del elemento.

Altura variable

Si el contenedor padre dispone de una altura fija en pixeles, podemos además de centrar los elementos, utilizar porcentajes en la altura de los mismos:

Ejemplo

.padre {
	background-color: #888888;
	position: relative;
	width: 50%;
	height: 200px;
	position: relative;	
}
.descendiente_1 {
	background-color: #a1cc3a;
	position: absolute;
	width: 50%;
	height: 50%;
	left: 25%;
	top: 25%;
}
.descendiente_2 {
	background-color: #CCCCCC;
	position: absolute; 
	width: 50%;
	height: 50%;
	left: 25%;
	top: 25%;
}

Ahora el contenedor padre será el que manda en la altura del resto de elementos descendientes, estos tendrán un 50% de la altura y anchura de su contenedor padre.

Realmente es muy sencillo centrar elementos si seguimos los pasos correctos, independientemente de si conocemos o no las medidas en px o en %.

Nos vemos en el próximo artículo.