CSS comment centrer une image horizontalement et verticalement dans un bloc ?

Horizontalement

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.

<!-- HTML --> 
<div class="container">
    <img src="rue-de-l-info.png" alt="My image" /> 
</div>

 

// CSS 
.container {
   width: 200px;
   height: 200px;
   border: 1px #23282d solid;
   text-align: center; 
}

 

Résultat :

[divider align= »center »]

Verticalement

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.

// CSS 
.container {
   width: 200px;
   height: 200px;
   border: 1px #23282d solid;
   text-align: center;
   display: table-cell;
   vertical-align: middle; 
}

 

Résultat :

 

Attention
Cette technique fonctionne sur Internet Explorer qu’à partir de la version 8. Une autre solution serait de mettre l’image dans un tableau, mais on perdra en sémantique

[divider align= »center »]

Horizontalement avec flexbox

Le centrage horizontal est devenu vraiment facile avec flexbox.

// CSS 
.container {
    display: flex;
    justify-content: center;
    width: 200px; 
    height: 200px; 
    border: 1px #23282d solid;
}
.container img {
    width: 50px; 
    height: 50px;
}

 

Résultat :

[divider align= »center »]

Verticalement avec flexbox

Avant l’apparition de flexbox, le centrage verticale des éléments était asses complexe. C’est aujourd’hui beaucoup plus accessible. Nous allons le voir dans l’exemple suivant.

// CSS 
.container {
    display: flex;    
    align-items: center;
    justify-content: center;
    width: 200px; 
    height: 200px; 
    border: 1px #23282d solid;
}
.container img {
    width: 50px; 
    height: 50px;
}

 

Résultat :