Centrar divs horizontal y verticalmente con CSS

Escrito por elfleat    1 Comentario

Suele pasar que tenemos inconvenientes a la hora de centrar nuestros divs horizontal y verticalmente en nuestra ventana, para que se adapte al centro del navegador, en cualquier resolución en la que se naveguela página. Pues aquí traigo un hack muy fácil de implementar que es el que suelo utilizar cuando necesito éste tipo de alineación.

Lo primero que hago es establecer un alto y ancho fijo (si queremos centrar verticalmente el div, se supone que el contenido no es dinámico; por tanto podemos definirle un ancho en los estilos); agregaré también un borde rojo para comprobar si nuestro div está centrado.

<div style="
width:200px;
height:200px;
background:red;"></div>

Una vez con las dimensiones establecidas, le pedimos que se ubique en el centro de la pantalla, estableciéndole en los estilos posición absoluta y especificándole que se ubique al 50% de la ventana.

top:50%;
left:50%;

Ahora viene el truco; nuestr div en éste momento debería estar centrada; pero en realidad estará centrada únicamente con relacion al eje de la parte superior izquierda. Para ajustarlo al centro del div, agregaremo márgenes arriba y a la izquierda en negativo, por el valor del 50% del ancho o alto, respectivamente. ej:

margin-top:-100px;
margin-left:-100px;

Y ya está con eso tenemos nuestro div centrado horizontal y verticalmente en cualquier resolución.