Comment centrer une image en CSS : la méthode simple qui marche à tous les coups

Pour centrer une image en CSS, le plus simple c’est d’utiliser display: block combiné avec margin: 0 auto sur ta balise <img>. Honnêtement, c’est la technique que j’utilise depuis des années et elle fonctionne à 99% du temps. Pas besoin de chercher midi à quatorze heures, trois lignes de code et le tour est joué. Bon, après il y a quelques cas particuliers où il faut sortir l’artillerie un peu plus lourde, mais rien de bien compliqué, je te montre tout ça juste en dessous.

Je vais te présenter dans cet article toutes les méthodes que je connais pour centrer une image, de la plus basique à la plus moderne avec Flexbox et Grid. Tu vas voir, le centrage d’image c’est vraiment à la portée de tout le monde une fois qu’on a les bons réflexes.

Sommaire

1. La méthode classique avec margin auto
2. Centrer une image avec Flexbox
3. Centrer une image avec CSS Grid
4. Centrer une image en position absolue
5. Centrer verticalement et horizontalement
6. Tableau récapitulatif des méthodes
7. Les erreurs courantes à éviter
8. FAQ

La méthode classique avec margin auto

Pourquoi cette technique fonctionne si bien

Quand j’ai commencé le CSS il y a un bon moment déjà, c’est la première méthode qu’on m’a apprise et franchement, elle reste ma préférée pour les cas simples. Une image en HTML, par défaut, c’est un élément inline. Ça veut dire qu’elle se comporte comme du texte et que margin: auto n’a aucun effet dessus. Le truc magique, c’est de la transformer en élément block.

Voici le code que j’utilise tout le temps :

css

img {
  display: block;
  margin: 0 auto;
}

Et voilà, c’est tout. Personnellement, je trouve que c’est la solution la plus propre quand tu veux juste centrer une image dans son conteneur parent sans te prendre la tête. Le 0 correspond aux marges haut et bas, et le auto répartit l’espace restant à gauche et à droite de manière égale. Le navigateur fait le boulot pour toi.

Si tu veux ajouter un peu d’espace au-dessus et en dessous de ton image, tu peux remplacer le 0 par la valeur de ton choix. Par exemple margin: 20px auto te donne 20 pixels d’espace en haut et en bas, tout en gardant le centrage horizontal.

Quand cette méthode montre ses limites

Cette technique marche super bien pour du centrage horizontal pur. Par contre, si tu veux centrer verticalement aussi, là il va falloir passer à autre chose. Et c’est là que Flexbox entre en scène.

Centrer une image avec Flexbox

La solution moderne par excellence

Flexbox c’est vraiment le truc qui a changé ma vie en tant que développeur web. Avant, centrer verticalement quelque chose en CSS c’était un cauchemar absolu, on faisait des montages improbables avec des position: absolute et des marges négatives. Maintenant, trois lignes et c’est plié.

Pour centrer une image avec Flexbox, tu appliques les propriétés sur le conteneur parent de ton image, pas sur l’image elle-même :

css

.conteneur {
  display: flex;
  justify-content: center;
  align-items: center;
}

justify-content: center s’occupe du centrage horizontal, et align-items: center du centrage vertical. C’est aussi simple que ça. Si tu veux juste centrer horizontalement, tu peux enlever la ligne avec align-items.

Ce qui est génial avec cette approche, c’est qu’elle fonctionne peu importe la taille de ton image. Que ce soit une petite icône de 50 pixels ou une grosse photo de 1200 pixels, le résultat est parfait à chaque fois. Personnellement, c’est la méthode que je recommande à tous les débutants aujourd’hui parce qu’elle est intuitive et qu’elle gère tous les cas de figure.

Un exemple concret avec du HTML

Imagine que tu as ce HTML tout simple :

html

<div class="conteneur">
  <img src="ma-photo.jpg" alt="Ma super photo">
</div>

Avec le CSS Flexbox que je t’ai montré juste avant, ton image sera parfaitement centrée dans le div. Pas d’inquiétude si tu débutes, ce truc est magique une fois qu’on comprend comment ça marche.

Centrer une image avec CSS Grid

Encore plus court que Flexbox

CSS Grid c’est l’autre grande révolution du CSS moderne. Pour centrer une image, on peut faire encore plus concis qu’avec Flexbox :

css

.conteneur {
  display: grid;
  place-items: center;
}

Avec juste deux lignes, tu obtiens un centrage parfait dans les deux directions. place-items: center est en fait un raccourci pour align-items: center et justify-items: center. Honnêtement, quand j’ai découvert cette propriété, j’étais bluffé.

J’utilise cette méthode quand je sais que je vais aussi avoir besoin de Grid pour la mise en page générale de ma page. Si c’est juste pour centrer une image isolée, Flexbox reste plus courant et c’est ce que tu vas croiser le plus souvent dans les projets existants.

La méthode avec text-align center

Il y a aussi une technique vieille comme le monde qui consiste à utiliser text-align: center sur le conteneur parent. Comme une image est un élément inline par défaut, elle se comporte comme du texte et hop, elle se centre. Cette méthode est encore très utilisée parce qu’elle est super compatible avec tous les navigateurs, même les plus anciens.

css

.conteneur {
  text-align: center;
}

C’est utile quand tu travailles sur des projets qui doivent supporter de vieilles versions d’Internet Explorer par exemple. Sinon, dans un monde parfait, je préfère Flexbox qui est plus explicite sur l’intention.

Centrer une image en position absolue

Pour les cas un peu plus spécifiques

Parfois tu as besoin de centrer une image qui est positionnée en absolu, par exemple pour une popup ou un overlay. La technique classique c’est de combiner position: absolute avec top: 50%, left: 50% et une transform: translate(-50%, -50%).

css

.image-overlay {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

Le top: 50% et left: 50% placent le coin supérieur gauche de l’image au centre du conteneur. Sauf que ce n’est pas vraiment ce qu’on veut, on veut que le centre de l’image soit au centre. C’est là que la transform intervient et décale l’image de la moitié de sa propre largeur et hauteur. Le plus dur est fait avec cette astuce.

Cette méthode est super pratique pour les modales, les bannières flottantes ou tout élément qui doit se superposer à d’autres contenus. Je l’utilise généralement quand Flexbox ne convient pas au contexte.

Centrer verticalement et horizontalement

Quand l’image doit être au milieu de la page

Si tu veux qu’une image soit pile au milieu de toute la page, par exemple pour une page de chargement ou un splash screen, voici comment je m’y prends :

css

body {
  display: flex;
  justify-content: center;
  align-items: center;
  min-height: 100vh;
  margin: 0;
}

Le truc important ici c’est le min-height: 100vh qui force le body à prendre au moins toute la hauteur de l’écran. Sans ça, le centrage vertical n’aurait aucun sens parce que le body ferait juste la hauteur de son contenu. J’oublie cette ligne au moins une fois sur deux quand je code rapidement, et après je me demande pourquoi rien ne marche.

Le margin: 0 sur le body c’est juste pour enlever les marges par défaut du navigateur qui peuvent décaler légèrement l’affichage.

Tableau récapitulatif des méthodes

Les erreurs courantes à éviter

Oublier de transformer l’image en élément block

C’est l’erreur numéro un que je vois chez les débutants. Tu mets margin: 0 auto sur ton image, tu actualises la page et… rien ne se passe. C’est juste parce que les images sont des éléments inline par défaut. Sans display: block, le margin: auto est totalement ignoré par le navigateur.

Voici les points à vérifier quand ton centrage ne fonctionne pas :

• L’image a bien display: block ou est dans un conteneur Flexbox/Grid
• Le conteneur parent a une largeur définie (pas toujours nécessaire mais ça aide)
• Il n’y a pas de float qui traîne et qui casse tout
• La largeur de l’image n’est pas supérieure à celle du conteneur

Confondre justify-content et align-items

Dans Flexbox, la direction par défaut est horizontale (flex-direction: row). Du coup, justify-content agit sur l’axe horizontal et align-items sur l’axe vertical. Mais si tu changes la direction en colonne avec flex-direction: column, c’est l’inverse qui se produit. Je me suis fait avoir des dizaines de fois avec ça, comme je l’ai fait pendant des années avant de bien intégrer le truc.

Ne pas définir de hauteur au conteneur

Pour centrer verticalement avec Flexbox ou Grid, il faut absolument que le conteneur ait une hauteur. Si tu mets align-items: center mais que ton conteneur fait pile la hauteur de l’image, tu ne verras aucune différence. C’est logique en fait, il n’y a pas d’espace vertical à répartir.

Les techniques bonus que j’utilise

Centrer une image responsive

Avec les sites responsives, il faut que ton image s’adapte à la taille de l’écran. Voici ma combinaison gagnante :

css

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

Le max-width: 100% empêche l’image de dépasser de son conteneur sur les petits écrans, et height: auto maintient les proportions. C’est vraiment basique mais ça change tout pour le rendu mobile.

Utiliser object-fit pour les images de taille fixe

Quand je veux qu’une image remplisse un conteneur de taille fixe sans se déformer, j’utilise object-fit. C’est super pratique pour les galeries de photos ou les vignettes :

css

img {
  width: 300px;
  height: 300px;
  object-fit: cover;
  object-position: center;
}

Avec object-fit: cover, l’image remplit tout l’espace disponible en se rognant si nécessaire, et object-position: center garantit que la partie centrale de l’image reste visible. C’est exactement comme la propriété background-size: cover mais pour les balises <img>.

FAQ

Pourquoi mon image ne se centre pas avec margin auto ?

C’est presque toujours parce que ton image est encore en display: inline (la valeur par défaut). Ajoute display: block à ton CSS et tu verras la différence immédiatement. Sinon vérifie aussi que le conteneur parent a bien une largeur supérieure à celle de l’image, sinon il n’y a rien à centrer.

Quelle est la meilleure méthode pour centrer une image en 2026 ?

Personnellement, je recommande Flexbox pour 90% des cas. C’est moderne, c’est lisible, c’est supporté par absolument tous les navigateurs récents et ça gère le centrage horizontal et vertical en même temps. Si tu travailles sur un projet avec beaucoup de mises en page complexes, CSS Grid est aussi un excellent choix.

Comment centrer plusieurs images côte à côte ?

C’est exactement le cas d’usage parfait pour Flexbox. Tu mets display: flex et justify-content: center sur le conteneur parent, et toutes tes images se centrent automatiquement en ligne. Tu peux ajouter gap: 20px pour avoir un espacement régulier entre elles, c’est vraiment pratique.

Est-ce que je peux centrer une image avec uniquement du HTML ?

Techniquement il existait des balises comme <center> et l’attribut align="center", mais ces méthodes sont obsolètes depuis longtemps et fortement déconseillées. Aujourd’hui le centrage se fait exclusivement en CSS, c’est une séparation claire entre le contenu et la présentation qui est devenue la norme.

Comment centrer une image dans un div de taille variable ?

Flexbox gère ça à merveille. Peu importe la taille du div, display: flex avec justify-content: center et align-items: center centreront ton image parfaitement. Le conteneur peut changer de taille selon l’écran, l’image restera toujours au milieu. C’est généralement ce qu’on cherche pour un design responsive moderne.

Le centrage avec position absolute affecte-t-il les autres éléments ?

Oui, dès qu’un élément est en position: absolute, il sort du flux normal du document. Les autres éléments se comportent comme si l’image n’existait pas et peuvent passer derrière. C’est juste à garder en tête, mais pour les overlays et les popups c’est exactement le comportement qu’on veut.