En tant que développeur front-end, vous devrez très certainement centrer une image à l'intérieur d'un container au moins une fois dans votre vie.
Une image à l'intérieur d'une div peut être centrée de deux manières : horizontalement ou verticalement.
Commençons par voir comment centrer une image horizontalement. Ensuite, nous verrons comment la centrer verticalement, puis comment la centrer des deux manières à la fois.
Centrer une image horizontalement : text-align
Supposons que nous ayons une image placée à l'intérieur d'une div comme ceci :
<div class="container">
<img src="my-image.webp" alt="My image" />
</div>
Et qu'on applique le style CSS de base suivant :
.container {
width: 200px;
height: 200px;
background-color: #0a0a23;
}
.container > img {
width: 100px;
}
La propriété text-align: center ne fonctionnera pas toujours puisqu'elle s'utilise habituellement pour centrer du texte. Néanmoins, dans le cas d'une image à l'intérieur d'un container bloc, cette méthode fonctionne très bien :
.container {
text-align: center;
}
Centrer une image horizontalement : margin-auto
Une autre méthode que l'on peut utiliser pour centrer une image horizontalement à l'intérieur d'une div est la propriété margin avec la valeur auto.
L'élément prendra la largeur spécifiée, et l'espace restant sera réparti équitablement entre les marges gauche et droite.
La propriété sera habituellement appliquée à l'image elle-même et non à la div parente (le container). Notez que cette propriété seule ne marche pas : il faudra également spécifier la largeur que doit prendre l'image. Cela permet au CSS de savoir quel espace est restant et comment le répartir entre les marges gauche et droite.
De plus, la balise img est un élément inline et la propriété margin: auto ne peut pas affecter un tel élément. Il faudra donc convertir l'image en élément block avec la propriété display: block.
.container > img {
width: 100px;
margin: auto;
display: block;
}
Centrer une image horizontalement : position et transform
Une autre méthode consiste à utiliser la propriété position et la propriété transform.
Il faut d'abord appliquer la propriété position: relative à la div parente, puis la propriété position: absolute à l'image enfant.
On peut ensuite ajuster la position de l'image grâce aux propriétés top, right, bottom et left.
Pour centrer l'image horizontalement, il nous faut la propriété left: 50% ou bien right: -50%. Mais l'image commencera au centre de la div et n'apparaîtra donc pas parfaitement centrée. Il nous faut donc également la propriété transform: translateX pour ajuster le centrage :
.container {
position: relative;
}
.container > img {
position: absolute;
left: 50%;
transform: translateX(-50%);
}
Centrer une image horizontalement : display: flex
.container {
display: flex;
justify-content: center;
}
Centrer une image verticalement : display: flex
Ici, la div parente doit avoir une hauteur spécifiée, pour que le CSS puisse savoir où se situe le centre.
.container {
height: 200px;
display: flex;
align-items: center;
}
Centrer une image verticalement : position et transform
.container {
position: relative;
}
.container > img {
position: absolute;
top: 50%;
transform: translateY(-50%);
}
Centrer une image horizontalement et verticalement : display: flex
.container {
height: 200px;
display: flex;
align-items: center;
justify-content: center;
}
Centrer une image horizontalement et verticalement : position et transform
.container {
position: relative;
}
.container > img {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%); /* translate(x, y) */
}