Centrar un div horizontalmente

Cómo centrar un div horizontalmente

Para centrar un div horizontalmente en pantalla usando CSS basta con aplicar unas sencillas reglas que veremos a continuación.

Requisitos para centrar un div horizontalmente

• Tener tamaño fijo.
• Estar posicionado de manera relativa
• Estar dentro de un contenedor con posición relativa

Cumpliendo estos requisitos, las reglas para centrar un div horizontalmente en pantalla son:

#main-wrapper{

margin: 0px auto;

width: 1125px; }

Con esto defino que un elemento (div normalmente) con id main-wrapper, va a medir 1125 píxeles de ancho y va a tener 0 píxeles de margen por arriba y por abajo, y se va a colocar centrado horizontalmente. Esto último se consigue con la palabra ‘auto’, ya que el navegador calculará automáticamente los píxeles de margen a derecha e izquierda para que sean siempre los mismos.

Este código funciona por ejemplo con el div contenedor de toda estaWeb o, como planteaba anteriormente, con cualquier div dentro de otro, estando el padre posicionado de manera relativa.

Ejemplo de cómo centrar un div horizontalmente dentro de un elemento

Ahora te voy a enseñar el CSS asociado a este div:

#div-centrado-post{

border: 2px solid #000;

margin: 10px auto;

padding: 6px 10px;

width: 120px;

}

Las reglas importantes son las del ancho y el margen. Al darle un ancho fijo de 120px y marcar el margen a X auto, le decimos al navegador que posicione un div de ancho 120 píxeles y que calcule el espacio a derecha e izquierda para que sea siempre igual. El resto de reglas son únicamente por maquetación y visualización.

Al utilizar bootstrap, los div de clase row ya tienen posición relativa, por lo que el requisito de estar en un contenedor con posicionamiento relativo se cumple fácilmente. Por otro lado, como se ve en mi ejemplo, no marco el div interno a relativo, ya que es la posición que tomaría por defecto.

Espero que este post te haya ayudado, para que pueda ayudar a otros, te invito a compartir, comentar o puntuar.