Así se hace, aunque no será compatible con navegadores viejos como IE6
El truco es usar un SPAN para llevar a su posición la imagen y usar display:inline
Código HTML:
<html>
<head>
<style type="text/css">
.envolcentro { background-color: #FF3399;
display: table-cell;
text-align: center;
vertical-align: middle;
width:1024px; /* tamaño horizontal del div contenedor de la imagen */
height:600px; /* tamaño vertical del div contenedor de la imagen */
}
.envolcentro * {
vertical-align: middle;
}
/*\*//*/
.envolcentro {
display: block;
}
/* Este es el truco */
.envolcentro span {
display: inline-block;
height: 100%;
width: 1px;
}
/**/
</style>
<!--[para internet IE 8]><style>
.envolcentro span {
display: inline-block;
height: 100%;
}
</style><![endif]-->
</head>
<body><div class="envolcentro">
<span></span><img src="bottom.png" width="300" height="300" alt="none" /></div>
</body>
</html> Agregas la clase class="envolcentro" a cualquier div donde quieras centrar verticalmente una imagen.
Al lado de la tag img se pone la tag <span></span> vacía.
Funciona en IE7, IE8, FireFox, Opera, Safari.