() translation by (you can also view the original English article)
Chris Coyier publicó recientemente un árbol de decisión en su web, CSS Tricks, para enseñar una gran cantidad de ténicas de centrado horizontal o vertical utilizando CSS. Como soluciones individuales tienen sus limitaciones, pero combinadas son una herramienta imparable de centrado que funciona en navegadores superiores a IE8 de manera consistente.
Así es como se hace.
Bloques iniciales
Si estás creando un sitio web adaptativo, lo más probable es que estés dimensionando los elementos con porcentajes, así que vamos a crear un elemento .container aleatorio:
1 |
<div class="container"> |
2 |
... |
3 |
</div>
|
1 |
.container { |
2 |
width: 70%; |
3 |
height: 70%; |
4 |
margin: 40px auto; |
5 |
background: red; |
6 |
}
|
Para asegurarnos de que éste se extiende correctamente, vamos a configurar lo siguiente html, body { width: 100%; height: 100%; }.
Cambiando las tornas
Ahora, dentro de nuestro .container, vamos a conseguir el centrado vertical con el típico diseño de tabla. Esta propiedad coge los elementos de bloque normales y, haciendo que se comporten como celdas de una tabla, provoca el centrado vertical:
1 |
<div class="container"> |
2 |
<div class="outer"> |
3 |
<div class="inner"> |
4 |
... |
5 |
</div>
|
6 |
</div>
|
7 |
</div>
|
1 |
.outer { |
2 |
display: table; |
3 |
width: 100%; |
4 |
height: 100%; |
5 |
}
|
6 |
.inner { |
7 |
display: table-cell; |
8 |
vertical-align: middle; |
9 |
text-align: center; |
10 |
}
|
Por último, vamos a añadir un elemento centrado horizontalmente:
1 |
<div class="container"> |
2 |
<div class="outer"> |
3 |
<div class="inner"> |
4 |
<div class="centered"> |
5 |
... |
6 |
</div>
|
7 |
</div>
|
8 |
</div>
|
9 |
</div>
|
1 |
.centered { |
2 |
position: relative; |
3 |
display: inline-block; |
4 |
|
5 |
width: 50%; |
6 |
padding: 1em; |
7 |
background: orange; |
8 |
color: white; |
9 |
}
|
Dentro de este, podemos colocar lo que nos venga en gana, incluyendo bloques de texto con altura dinámica, o elementos con posición absoluta.
Variaciones
Para modificar el centrado horizontal de nuestro elemento, basta con cambiar la propiedad text-align del .inner. Para hacer lo propio con el centrado vertical, modificaremos la propiedad vertical-align del .inner.
Conclusión
Puede parecer mucho código para este ejemplo, pero sólo utilizamos tres divs: .outer, .inner, y .centered. Además, el estilo de éstos es suficientemente consistente como para reutilizarlo en nuestra plantilla sin preocuparnos de él en un futuro.
Se compone de un elemento a mayores que la mayoría de las técnicas de centrado y está hecho a prueba de balas. Espero que esta técnica se convierta en un estándar a la hora de centrar elementos en CSS y así dejemos de preocuparnos por cómo vamos a centrar nuestros bloques.
¡Sé el primero en conocer las nuevas traducciones–sigue @tutsplus_es en Twitter!
