Centrer une image verticalement et horizontalement sur une page

Exemple

Code html

<div id="contenu">
<img src="images/photo_small.jpg" alt="photo" width="390" height="233">
</div>

Code CSS

#contenu{
	  position:absolute;
     left: 50%; 
     top: 50%;
     margin-top: -110px; /* moitié de la hauteur de l'image */
     margin-left: -195px; /* moitié de la largeur de l'image */
 }

Remarque pour IE 5 Mac

Internet Explorer 5 ne gère pas bien le centrage vertical avec cette méthode. Ce qui peut-être gênant quand il s'agit de centrer la totalité de la mise en page. Dans ce cas vous pouvez utilisez un hack CSS qui empêchera IE 5 Mac d'interpréter les règles lier au centrage vertical, le résultat final n'est pas fantastique mais a pour mérite de ne pas rendre illisible votre site ou votre image.

  #contenu{
	position:absolute;
	left: 50%;
	margin-left: -195px;
	/* Hack CC pour IE MAC \*/
	top: 50%;
	margin-top: -110px;
	/* fin hack CSS pour IE MAC */
}

voir l'exemple

voir le tutoriel pour centrer un élément PA