5 formas de centrar un DIV horizontal

La forma de centrar cajas con CSS depende mucho del display, position y el uso que quieras darle. En este tutorial veremos varias formas de centrar cajas horizontalmente.

Centrar una caja con tamaño fijo y display:block

El display:block es un estilo por defecto en muchos tags como div, article, section, header, footer, aside y muchas más etiquetas que formarán la semántica del website.

Código :

<div class=”box”></div>

Código :

.box{
   margin: 0 auto;
   width: 200px;
}

Esta es la forma más tradicional de centrar una caja en CSS.

Centrar una caja con display:inline-block

display:inline-block es muy usado para crear cajas con contenido variable y que éstas se apilen una al costado de la otra muy fácilmente. La forma de centrar este tipo de elementos depende de su contenedor padre:

Código :

<section class=”container” >
    <div class=”box”></div>
</section>

Código :

.container{
   text-align:center;
}
.box{
   display: inline-block;
}

Centrar una caja con position:absolute y ancho fijo

Existen dos opciones que veremos a continuación. Muchas de estas cajas son usadas como overlay o, algún Dios no lo quiera, popup.

Opción 1

Código :

<div class=”box”></div>

Código :

.box{
   position:absolute;
   margin: 0 auto;
   left: 0;
   right: 0;
   width:200px;
}

Este método tiene problemas de compatibilidad con IE9 o inferiores pero nos recuerda mucho a cómo se centra una caja con display:block, pero si en tu caso necesitas dar un poco más de soporte puedes hacer un par de cálculos y lograr esto:

Opción 2

Código :

<div class=”box></div>

Código :

.box{
   position:absolute;
   width: 200px;
   left: 50%;
   margin-left: -100px;
}

Yo sé que tu lo notaste y el truco aquí es colocar un margen negativo igual a la mitad del ancho de nuestra caja.

Centrar una caja con position:absolute y ancho en porcentaje

Aún no sé la forma de centrar una caja que varía de tamaño como lo hace una caja con display:inline-block (sólo con css ) pero para estas ocasiones podemos usar porcentajes para el ancho del elemento.

Código :

<div class=”box></div>

Código :

.box{
   position:absolute;
   left: 10%;
   right: 10%;
}

Aquí damos márgenes hacia los dos lados con el mismo valor (10%), lo que hace que el ancho de nuestro .box sea un 80% del viewport.

Mira el ejemplo completo aquí

Si quieres seguir aprendiendo sobre técnicas avanzadas de arquitectura de CSS puedes inscribirte al curso de Frontend profesional de Mejorando.la en: http://mejorando.la/frontend

¿Sabes SQL? ¿No-SQL? Aprende MySQL, PostgreSQL, MongoDB, Redis y más con el Curso Profesional de Bases de Datos que empieza el martes, en vivo.