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>

[css:1:cbad1a67ca].box{
margin: 0 auto;
width: 200px;
}[/css:1:cbad1a67ca]

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>

[css:1:cbad1a67ca].container{
text-align:center;
}
.box{
display: inline-block;
}[/css:1:cbad1a67ca]

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>

[css:1:cbad1a67ca].box{
position:absolute;
margin: 0 auto;
left: 0;
right: 0;
width:200px;
}
[/css:1:cbad1a67ca]

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>

[css:1:cbad1a67ca].box{
position:absolute;
width: 200px;
left: 50%;
margin-left: -100px;
}[/css:1:cbad1a67ca]

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

[nota:cbad1a67ca]Podemos hacerlo a la inversa y usar right: 50% y margin-right: -100px pero es totalmente lo mismo y teniendo en cuenta que leemos de izquierda a derecha es más fácil entenderlo así.[/nota:cbad1a67ca]

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 :oops: ) pero para estas ocasiones podemos usar porcentajes para el ancho del elemento.

Código :

<div class=”box></div>

[css:1:cbad1a67ca].box{
position:absolute;
left: 10%;
right: 10%;
}[/css:1:cbad1a67ca]

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://ift.tt/1i6hGCT

Enviar comentario

via Cristalab http://ift.tt/1fugCJ6

Advertisements

Tags:

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s

%d bloggers like this: