Centrer un élément en CSS : toutes les méthodes

Centrer une div en CSS est l’une des questions les plus posées par les développeurs web, débutants comme confirmés. La raison est simple : il n’existe pas une seule méthode, mais plusieurs, et la bonne dépend de ce que vous centrez (du texte, un bloc, une image), de la direction (horizontal, vertical, les deux) et du contexte. Ce guide passe en revue toutes les techniques, avec du code prêt à copier et une indication claire de quand utiliser chacune.

Centrer du texte horizontalement : text-align

Pour du contenu en ligne (texte, liens, images en inline), la méthode la plus simple reste text-align: center sur le conteneur.

.conteneur {
  text-align: center;
}

<div class="conteneur">
  <p>Ce texte est centré horizontalement</p>
</div>

Attention : text-align ne centre que le contenu en ligne, pas un bloc de largeur définie. Pour centrer une <div> avec une largeur fixe, il faut une autre approche.

Centrer un bloc horizontalement : margin auto

C’est la technique historique pour centrer un élément de type bloc avec une largeur définie. On donne une largeur, puis margin: auto répartit l’espace restant à gauche et à droite.

.boite {
  width: 400px;
  margin: 0 auto;   /* 0 en haut/bas, auto à gauche/droite */
}

Deux conditions pour que ça marche : l’élément doit avoir une width (ou max-width) explicite et ne pas être en position: absolute ni flottant. C’est parfait pour centrer un conteneur de contenu principal dans la page. En revanche, margin: auto seul ne centre pas verticalement.

Centrer avec Flexbox : la méthode moderne

Flexbox est aujourd’hui la solution de référence, à la fois pour le centrage horizontal, vertical, ou les deux à la fois. Trois lignes suffisent.

Centrage horizontal et vertical (le « centrage parfait »)

.parent {
  display: flex;
  justify-content: center; /* axe horizontal */
  align-items: center;     /* axe vertical */
  min-height: 100vh;       /* pour avoir de la hauteur à centrer dedans */
}

<div class="parent">
  <div class="enfant">Je suis parfaitement centré</div>
</div>

C’est robuste, ça fonctionne quelle que soit la taille de l’enfant, et ça n’exige aucune dimension fixe. Pour aller plus loin sur cette technique et tout ce qu’elle permet, consultez notre guide complet de Flexbox.

Centrer uniquement horizontalement

.parent {
  display: flex;
  justify-content: center;
}

Centrer uniquement verticalement

.parent {
  display: flex;
  align-items: center;
  min-height: 300px;
}

Centrer avec CSS Grid : encore plus court

CSS Grid propose la méthode la plus concise pour un centrage parfait, grâce à place-items.

.parent {
  display: grid;
  place-items: center;   /* centre sur les deux axes en une ligne */
  min-height: 100vh;
}

place-items: center est un raccourci pour align-items: center + justify-items: center. Difficile de faire plus court. Si vous découvrez la grille, notre guide de CSS Grid détaille tout le modèle.

Centrer avec position absolute et transform

Cette technique reste utile quand l’élément doit être détaché du flux, par exemple une modale ou un badge superposé. On positionne le coin haut-gauche au centre, puis on recule l’élément de la moitié de sa propre taille avec transform.

.parent {
  position: relative;
  min-height: 400px;
}
.enfant {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

Le translate(-50%, -50%) est la clé : il décale l’élément de la moitié de sa propre largeur et hauteur, ce qui le recentre parfaitement, quelle que soit sa taille. C’est la méthode idéale pour une fenêtre modale au milieu de l’écran.

Variante sans transform (élément de taille connue)

Si vous connaissez les dimensions exactes de l’élément, vous pouvez vous passer de transform avec des marges négatives.

.enfant {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 200px;
  height: 100px;
  margin-left: -100px;  /* -width / 2 */
  margin-top: -50px;    /* -height / 2 */
}

Cette variante est plus ancienne et rigide : elle impose de connaître la taille. Préférez la version transform dès que possible.

Centrer une image

Une image est un élément inline par défaut. Deux approches selon le rendu voulu.

/* Méthode 1 : la traiter comme un bloc et utiliser margin auto */
img {
  display: block;
  margin: 0 auto;
}

/* Méthode 2 : centrer via le conteneur parent */
.galerie {
  text-align: center; /* fonctionne car l'image reste inline */
}

Pour un centrage horizontal ET vertical d’une image dans une zone, Flexbox reste la réponse la plus fiable.

Centrer verticalement une seule ligne de texte : line-height

Astuce classique et légère quand il n’y a qu’une seule ligne de texte dans un élément de hauteur connue : faire correspondre line-height à la hauteur.

.bouton {
  height: 48px;
  line-height: 48px;  /* centre verticalement la ligne unique */
  text-align: center; /* + centre horizontalement */
}

Limite importante : cela ne fonctionne bien qu’avec une seule ligne. Sur plusieurs lignes, le rendu casse ; utilisez alors Flexbox.

Quelle méthode choisir ? Le récapitulatif

Pour ne plus hésiter, voici la logique cas par cas :

Du texte à centrer horizontalement : text-align: center.
Un bloc de largeur fixe, horizontalement : margin: 0 auto.
Un centrage parfait (H + V), cas général : Flexbox (justify-content + align-items) ou Grid (place-items: center). C’est la recommandation par défaut aujourd’hui.
Un élément détaché du flux (modale, overlay) : position: absolute + transform: translate(-50%, -50%).
Une seule ligne de texte dans un bouton : line-height égal à la hauteur.

En résumé

Il n’y a pas de « bonne » méthode unique pour centrer en CSS, mais un outil adapté à chaque situation. Retenez surtout que Flexbox et Grid ont rendu le centrage moderne trivial : trois lignes suffisent pour un centrage parfait, sans les vieilles astuces fragiles. Gardez margin: auto pour les blocs classiques, text-align pour le contenu en ligne, et position + transform pour les éléments superposés. Avec ces réflexes, plus jamais vous ne bloquerez sur un centrage.