Webmaster Libre

Supongo que todos sabemos lo difícil que puede resultar conseguir que nuestras páginas se vean bien en todos los navegadores, en múltiples ocasiones nos vemos forzados a usar fragmentos de código propietario, que rompen con la validación, para conseguir efectos sencillos en determinados navegadores (no miro para ninguno…).

Por suerte, tenemos a nuestra disposición diversos mecanismos para facilitarnos, en la medida de lo posible, la labor de obtener páginas compatibles con todos los navegadores y que validen contra los estándares web.
(más…)

Si centrar elementos horizontalmente con CSS es casi un juego de niños, el centrado vertical entraña una dificultad muy superior.

No existe una propiedad de CSS equivalente a vertical-align: middle que se pueda aplicar a elementos que no sean tablas por tanto se hace necesario emplear un pequeño truco para conseguir el mismo efecto.

En el siguiente ejemplo vamos a centrar un elemento verticalmente con respecto al tamaño de toda la página.

Creamos un contenedor al que daremos la propiedad display: table

.contenedor {
top: 0;
left: 0;
width: 100%;
height: 100%;
position: fixed;
display: table; }

Creamos un segundo contenedor al que daremos la propiedad display: table-cell y sobre el que aplicaremos el centrado vertical-align: middle;

.centrado {
display: table-cell;
vertical-align: middle;
text-align: center; }

Y finalmente, creamos el que será nuestro contenedor centrado verticalmente, al que también daremos margin: 0 auto para centrarlo horizontalmente.

.contenido {
width: 200px;
height: 200px;
margin: 0 auto;
border: 1px solid #000;}

Centrado Vertical con CSS, ejemplo 1

Pero, claro, el Explorer no entiende estas simples instrucciones y, por tanto, se hace necesario emplear algunos trucos para conseguir un resultado compatible con la mayor parte de los navegadores.

Para ello, vamos a evitar utilizar el hack del guión bajo y, en su lugar, vamos a aprovechar un fallo del explorer para producir un CSS válido.

.contenedor {
top: 0;
left: 0;
width: 100%;
height: 100%;}

.contenedor[class] {
position: fixed;
display: table;}

.centrado {
position: absolute;
top: 50%;}

.centrado[class] {
display: table-cell;
vertical-align: middle;
text-align: center;
position: static;}

.contenido {
width: 200px;
height: 200px;
border: 1px solid #000;
margin: 0 auto;
position: relative;
top: -50%;}

El selector .contenido[class] es exactamente lo mismo que .contenido pero IExplorer ignora todos los selectores de atributo, lo cual nos permite introducir las instrucciones pertinentes para los navegadores más avanzados (como Firefox o Safari) sin que interfieran con el surrealista navegador de Microsoft.

Centrado Vertical con CSS, ejemplo 2