Centrar una imagen o un DIV verticalmente dentro de otro DIV

jueves, 16 de septiembre de 2010

Centrar una imagen o un DIV verticalmente dentro de otro DIV

Centrar contenido verticalmente no es tarea sencilla, pues ni siquiera existe una propiedad, por ejemplo encargada de centrar una imagen horizontalmente, menos de hacerlo de forma vertical, aún así es posible centrar en X e Y un contenido al mismo tiempo mediante un truco usando una etiqueta <span></span> vacia, aunque claro esto no será compatible con Internet Explorer 6.

Captura de una imagen centrada en los ejes X e Y

Como sea yo ya no doy soporte, ni me interesa obsesionarme con que todos los navegadores sean compatibles, así que mientras que todos los navegadores actuales incluyendo a IE7 y I8 lo soporten me doy por satisfecho.

Podemos copiar este código HTML en un archivo text y guardarlo como pagina.html

<html>
<head>
<style type="text/css">
.envolcentro { background-color: #FF3399;
    display: table-cell;
    text-align: center;
    vertical-align: middle;
    width:1024px;
    height:600px;
}
.envolcentro * {
    vertical-align: middle;
}
/*\*//*/
.envolcentro {
    display: block;
}
.envolcentro span {
    display: inline-block;
    height: 100%;
    width: 1px;
}
/* copien y peguen lo de color rosa en su hoja de estilo */
</style>


</head>

<body>
<div class="envolcentro">
<span></span>
<img src="imagen.png" width="300" height="300" alt="none" />
</div>
</body>
</html>

Explicando el truco
Para que funcione con Internet Explorer 8 agreguamos luego de </style> o en cualquier parte antes de la etiqueta </head> el siguiente estilo (como se muestra arriba):

La clase envolcentro se la agregamos a el dive que será la envoltura principa:

<div class="envolcentro"></div>

Dentro de esta tendremos que agregar una etiqueta vaciá de SPAN:

<div class="envolcentro"><span></span></div>

Despues de SPAN podemos poner un div, una imagen o un texto, para el caso de la imagen:

<div class="envolcentro">
<span></span><img src="imagen.png" width="300" height="300" alt="none" />
</div>

Para texto:

<div class="envolcentro">
<span></span>Hola, escribe tu texto aquí
</div>

Para un div:

<div class="envolcentro">

<span></span>
<div>contenido</div>
</div>

En el estilo principal, deberemos modificar el ancho y el alto del DIV:

.envolcentro
{
background-color: #FF3399;
display: table-cell;
text-align: center;
vertical-align: middle;
width:1024px;
height:600px;
}

Un ejemplo que he diseñado puede visitarse desde: Pagina centrada verticalmente

Comentarios y Consultas

Los mensajes serán revisados a veces. No te olvides que soy una persona, no se trata de faltar al respeto, todos tenemos opiniones, no hay que enojarse.

Puedes marcar Notificarme para recibir la notificación de la respuesta.