Centrer une image (horizontalement et verticalement) dans un bloc

Centrage horizontal

Le centrage horizontal d'une image dans un un conteneur de type bloc, une <div> par exemple, ne pose pas de problème. Il suffit de définir la propriété CSS text-align à center sur le conteneur.

Code HTML :

<div class=conteneur>
  <img src=image.jpg alt=Image />
</div> 

Code CSS :

.conteneur{
  width: 300px;
  height: 300px;
  border: 1px #aaa solid; 
  text-align: center;
}

Résultat :

Centrage vertical

Le centrage vertical est plus délicat à mettre en place.

Il faut en effet modifier la propriété display de notre conteneur pour pouvoir utiliser la propriété vertical-align qui nous permettra de positionner verticalement l'image.

Code CSS :

.conteneur{
  width: 300px;
  height: 300px;
  border: 1px #aaa solid;
  text-align: center;
  display: table-cell;
  vertical-align: middle;
}

Résultat :

Attention ! Malheureusement, cette technique ne fonctionne sur Internet Explorer qu'à partir de la version 8. Pour y remédier, on peut mettre l'image dans un tableau à une case pour reproduire ce positionnement mais on perd alors en sémantique.