Retour • 05/11/2024

Comment centrer une image en CSS : Les 5 méthodes

Écris par Melvyn Malherbe le 05/11/2024

Salut ! Si tu galères à centrer une image en CSS, ne t'inquiète pas, je vais t'expliquer les meilleures techniques pour y arriver. On va voir plusieurs méthodes, de la plus simple à la plus flexible.

1. La méthode Flexbox

Commençons par la méthode la plus moderne et flexible : Flexbox. C'est ma préférée car elle fonctionne dans presque tous les cas.

.container {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100vh; /* Pour centrer verticalement sur toute la hauteur */
}

img {
  max-width: 100%;
  height: auto;
}

Voici comment ça fonctionne en pratique :

Cette méthode est géniale car elle centre l'image à la fois horizontalement et verticalement. Le justify-content: center s'occupe du centrage horizontal, tandis que align-items: center gère le vertical.

Pour en apprendre plus, il faut vraiment que tu aille voir mon guilde complet sur FlexBox CSS.

2. La méthode margin: auto

Une autre technique classique mais efficace consiste à utiliser margin: auto avec display: block. C'est parfait pour un centrage horizontal simple.

img {
  display: block;
  margin: 0 auto;
  max-width: 100%;
  height: auto;
}

Regarde comment ça fonctionne :

Cette méthode est super simple et fonctionne bien pour le centrage horizontal. Par contre, pour le centrage vertical, il faudra combiner avec d'autres techniques.

3. La méthode position: absolute

Si tu as besoin d'un contrôle précis sur le positionnement, la méthode position: absolute peut être très utile.

.container {
  position: relative;
  height: 100vh;
}

img {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  max-width: 100%;
  height: auto;
}

Voici comment ça se comporte :

Cette technique est puissante car elle permet un centrage parfait, même si tu ne connais pas les dimensions de l'image. Le transform: translate(-50%, -50%) est la clé ici, car il déplace l'image de moitié de sa propre taille dans les deux directions.

4. La méthode Grid

Si tu es fan de CSS Grid (et tu devrais l'être !), voici comment centrer une image avec cette méthode :

.container {
  display: grid;
  place-items: center;
  height: 100vh;
}

img {
  max-width: 100%;
  height: auto;
}

Et voilà le résultat :

Cette méthode est incroyablement concise. Le place-items: center est une sorte de super-pouvoir qui centre l'élément à la fois horizontalement et verticalement en une seule ligne !

Conclusion

Voilà, tu as maintenant toutes les cartes en main pour centrer tes images comme un pro ! Personnellement, j'utilise souvent Flexbox ou Grid pour leur flexibilité, mais chaque méthode a ses avantages selon le contexte.

N'hésite pas à jouer avec les playgrounds pour bien comprendre comment chaque technique fonctionne. La pratique est la clé pour maîtriser ces concepts !

Retrouve d'autre article sur le CSS :

• Les couleurs en CSS
• Le guide complet sur le Flow Layout
• 3 manière de centrer une div

Allez, amuse-toi bien avec le centrage d'images et n'hésite pas si tu as des questions !