¿ Como alinear una imagen en horizontal y vertical dentro de un div ?

Hola!

He leído mucho sobre el tema de alinear una imagen dentro de un div (en horizontal y vertical). Cuando debo alinear imágenes uso background-image, sin embargo, existen ocasiones en que se hace recomendable utilizar la etiqueta <img> de toda la vida.

Algo tan sencillo en apariencia se convierte en una odisea. He probado diferentes códigos, pero unos van bien solo con los navegadores más modernos, otros solo con IE...

Necesitaría saber como alinear una imagen dentro de un div (en horizontal y vertical) de manera compatible con navegadores antiguos (IE8) y sin saber previamente que tamaño tendrá la imagen.

Gracias!!

Código HTML :

<div>
   <img src="" width="200" height="200" />
</div>

Código CSS :

div{width:500px;height:500px;position:relative;border:1px solid #000;}
img{background:#CCC; margin:auto; display:block; position:relative; top:50%; margin-top:-100px;}

Para centrar horizontal con margin auto, en horizontal lo bajas el 50% del contenido y subes el 50% de la altura de la imagen