CSS3: CENTRAR OBJETO HORIZONTAL Y VERTICALMENTE SIN MEDIDAS CONOCIDAS

centradoTodos los que nos dedicamos al Diseño de páginas web, sabemos que la maquetación basada en tablas ya es algo antediluviano y obsoleto. Así pues, por regla general, usaremos las tablas para mostrar contenidos que nos interese organizar en filas y columnas de forma expresa.

Para los que aprendieron a maquetar usando tablas, esto plantea un problema sobre cómo centrar objetos dentro de otros, especialmente si no disponemos de anchos y/o altos fijos de la caja padre.

Lo cierto es que, si hay algo que criticar a CSS3, es la falta de comandos operativos para realizar algo tan básico como lo es el centrado de los elementos.
Todos conocemos algunos hacks famosos y archiconocidos como el “margin: 0 auto;”, el cual centrará el elemento sólo de forma horizontal, y sólo si definimos como posición relative o static.

A partir de ahí, nos encontramos ante un séquito de soluciones nada intuitivas, la mayoría de las cuales cuentan con que la anchura y/o la altura de la caja son parámetros que vamos a expresar en unidades absolutas (px). Y qué ocurre si lo que queremos es optar por diseños fluidos y adaptativos? Es decir, trabajar con unidades relativas (%)?

LA SOLUCIÓN

La solución que propongo aquí, consiste en utilizar la propiedad transform para poder centrar horizontal y verticalmente uno o varios elementos.

En el siguiente ejemplo, vamos a centrar algo tan sencillo como una caja que aloja texto dentro del body.

El código HTML5

<div class="caja">
<p>Mediante el presente texto comprobamos como la caja se centra tanto horizontal como horizontalmente.</p>
</div>

El código CSS3

.caja
{
position: absolute; /*aunque en determinadas ocasiones podría interesarnos “relative”*/
width : 30%; /*el valor que queramos*/
left: 50%;
top: 50%;
transform: translate(-50%, -50%);
-moz-transform: translate(-50%, -50%); /*aplicamos los prefijos para los distintos navegadores*/
-webkit-transform: translate(-50%, -50%);
-o-transform: translate(-50%, -50%);
-ms-transform: translate(-50%, -50%);
text-align: center;
}

Sin más por el momento, espero que te resulte útil en tus diseños!
Y si tienes cualquier idea o sugerencia, no dudes en dejarme un comentario.

Manuel Córdoba

Enlace para bookmark : Enlace permanente.

Deja un comentario

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *