Guía completa para centrar un div
Con un par de trucos de estilo CSS, se puede centrar cualquier div, horizontal, vertical o ambos
Cada nuevo desarrollador encuentra inevitablemente que centrar un div no es tan obvio como era de esperar. Centrar lo que hay dentro de un div es bastante fácil, dando a la propiedad text-align un valor center, pero luego las cosas tienden a ser algo más complicadas. Llegar a centrar un div verticalmente puede provocarnos dolores de cabeza con el CSS.
El objetivo de este artículo es mostrar cómo, con un par de trucos de estilo CSS, se puede centrar cualquier div, horizontal, vertical o ambos. Y dentro de la página o un div.
Centrar un div en una página, básico
Este método funciona con casi todos los navegadores, siempre.
CSS
.center-div
{
margin: 0 auto;
width: 100px;
}
El valor auto en la propiedad margin establece los márgenes izquierdo y derecho para el espacio disponible dentro de la página. Lo que hay que recordar es que tu div centrado debe tener una propiedad widht.
Centrar un div dentro de un div, de la vieja escuela
Esto funciona con casi todos los navegadores.
CSS
.outer-div
{
padding: 30px;
}
.inner-div
{
margin: 0 auto;
width: 100px;
}
HTML
<div class="outer-div"><div class="inner-div"></div></div>
El truco margin auto ataca de nuevo. El div interior (inner-div) debe tener una propiedad widht.
Centrar un div dentro de un div con inline-block
Con este método el div interior no requiere un width establecido. Funciona con todos los navegadores razonablemente modernos, incluyendo Internet Explorer 8.
CSS
.outer-div
{
padding: 30px;
text-align: center;
}
.inner-div
{
display: inline-block;
padding: 50px;
}
HTML
<div class="outer-div"><div class="inner-div"></div></div>
La propiedad text-align sólo funciona en los elementos inline. El valor inline-block muestra el div interior como un elemento inline así como un bloque, por lo que la propiedad text-align en el div exterior (outer-div) centra el div interior.
Centrar un div dentro de un div horizontal y verticalmente
Se utiliza el truco margin auto para centrar un div horizontal y verticalmente. Funciona con todos los navegadores modernos.
CSS
.outer-div
{
padding: 30px;
}
.inner-div
{
margin: auto;
width: 100px;
height: 100px;
}
HTML
<div class="outer-div"><div class="inner-div"></div></div>
El div interior debe tener las propiedades width y height. Esto no funcionará si el div exterior tiene una altura (height) fija.
Centrar un div en la parte inferior de una página
Esto utiliza margin auto y un div exterior posicionado absolutamente (position: absolute;). Funciona con todos los navegadores modernos.
CSS
.outer-div
{
position: absolute;
bottom: 70px;
width: 100%;
}
.inner-div
{
margin: 0 auto;
width: 100px;
height: 100px;
background-color: #ccc;
}
HTML
<div class="outer-div"><div class="inner-div"></div></div>
El div interior debe tener una propiedad width. La distancia a la parte inferior de la página se establece con la propiedad bottom en el div exterior.
Centrar un div en una página, horizontal y verticalmente
Esta fórmula utiliza de nuevo margin auto y un div exterior posicionado absolutamente. Funciona con todos los navegadores modernos.
CSS
.center-div
{
position: absolute;
margin: auto;
top: 0;
right: 0;
bottom: 0;
left: 0;
width: 100px;
height: 100px;
background-color: #ccc;
}
El div debe tener las propiedades width y height.
¿Qué pasa con Flexbox?
Hay un nuevo modelo de diseño de CSS3 llamado Flexbox que puede hacer más fácil el centrado. Sin embargo, en la actualidad carece de soporte de los navegadores, principalmente en IE (la versión 10 tiene soporte parcial y el soporte total no llegará hasta la versión 11). Chrome, Safari y Firefox lo soportan, pero con los prefijos de proveedores del navegador.
