7 days of unlimited WordPress themes, plugins & graphics - for free!* Unlimited asset downloads! Start 7-Day Free Trial
Advertisement
  1. Web Design
  2. CSS

El santo grial del centrado CSS

Scroll to top
Read Time: 2 mins

Spanish (Español) translation by Juan Flores (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:

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:

Por último, vamos a añadir un elemento centrado horizontalmente:

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!

Advertisement
Did you find this post useful?
Want a weekly email summary?
Subscribe below and we’ll send you a weekly email summary of all new Web Design tutorials. Never miss out on learning about the next big thing.
Advertisement
Looking for something to help kick start your next project?
Envato Market has a range of items for sale to help get you started.