Comment centrer n'importe quoi avec le CSS moderne

Le centrage en CSS a la réputation d’être plus difficile qu’il ne devrait l’être. Vous essayez text-align: center sur un div, rien ne bouge. Vous ajoutez margin: auto, l’élément se centre horizontalement mais pas verticalement. Vous cherchez une solution, trouvez cinq réponses différentes, et aucune n’explique pourquoi elles fonctionnent.

Le véritable problème est que le CSS possède plusieurs contextes de mise en page, et chacun gère l’alignement différemment. Une fois que vous comprenez dans quel contexte vous travaillez, le centrage devient simple. Voici ce qui fonctionne réellement aujourd’hui.

Comprendre d’abord le contexte de mise en page

Avant de choisir une technique, posez-vous une question : quel système de mise en page utilise l’élément parent ?

Le centrage se comporte différemment dans le flux normal, Flexbox et Grid. Appliquer la mauvaise méthode dans le mauvais contexte explique pourquoi le centrage semble incohérent. Les trois scénarios que vous rencontrerez le plus souvent sont :

• Centrer du contenu en ligne (texte, liens) à l’intérieur d’un bloc
• Centrer un élément de type bloc horizontalement dans son parent
• Centrer un élément à la fois horizontalement et verticalement

Centrer du contenu en ligne avec text-align

Pour le texte, les liens et autres éléments en ligne, text-align: center sur le parent est tout ce dont vous avez besoin :

.card-header {
  text-align: center;
}

Cela n’affecte que le contenu en ligne à l’intérieur du conteneur. Cela ne déplacera pas le conteneur lui-même. Une erreur courante consiste à appliquer text-align: center en s’attendant à ce qu’un div change de position — ce ne sera pas le cas.

Centrage horizontal avec margin-inline: auto

Pour centrer un élément de type bloc horizontalement dans son parent, utilisez les marges automatiques. La manière moderne d’écrire cela utilise les propriétés logiques :

.content {
  width: 680px;
  margin-inline: auto;
}

margin-inline: auto est équivalent à margin-left: auto; margin-right: auto, mais respecte la direction d’écriture, ce qui est important pour les mises en page internationalisées. C’est l’outil approprié pour centrer les conteneurs de page, les conteneurs d’articles et les formulaires. L’élément doit être plus étroit que son conteneur afin qu’il reste un espace horizontal pour que les marges automatiques puissent se répartir.

Centrage CSS Flexbox : horizontal et vertical

Flexbox est la technique de centrage CSS moderne la plus pratique pour aligner des éléments dans un conteneur, en particulier lorsque vous avez plusieurs enfants ou avez besoin d’un contrôle directionnel :

.container {
  display: flex;
  justify-content: center; /* horizontal */
  align-items: center;     /* vertical */
  min-height: 100dvh;
}

Remarque : Utilisez min-height: 100dvh au lieu de height: 100vh pour les mises en page plein écran. L’unité dvh tient compte de l’interface utilisateur dynamique du navigateur sur mobile (barres d’adresse, barres d’outils), ce que 100vh ne gère pas correctement. Les unités de viewport dynamiques sont désormais largement prises en charge par les navigateurs modernes et suivies sur https://webstatus.dev/features/viewport-unit-variants.

justify-content contrôle l’alignement le long de l’axe principal. align-items contrôle l’axe transversal. Ensemble, ils centrent n’importe quel élément enfant quelle que soit sa dimension. C’est le bon choix lorsque vous centrez plusieurs éléments ou avez besoin d’un contrôle sur l’espacement et la direction.

Centrage CSS Grid : le chemin le plus court

Pour centrer un seul élément à l’intérieur d’un conteneur, CSS Grid avec place-items est l’option la plus concise :

.wrapper {
  display: grid;
  place-items: center;
  min-height: 100dvh;
}

place-items: center est un raccourci pour align-items: center et justify-items: center. Il centre l’enfant sur les deux axes en deux déclarations. Si vous avez seulement besoin de centrer un élément et n’avez pas besoin d’une logique de mise en page complexe, c’est l’approche la plus élégante.

Vous pouvez également appliquer le centrage du côté de l’enfant en utilisant place-self: center ou margin: auto sur un élément de grille, ce qui est utile lorsque vous ne contrôlez pas le CSS du parent.

Quelle méthode devriez-vous utiliser ?

Une note sur les nouvelles capacités CSS

CSS Anchor Positioning vous permet d’aligner un élément par rapport à un autre élément spécifique — utile pour les infobulles, les popovers et les interfaces attachées. Cette fonctionnalité a récemment atteint la disponibilité dans les navigateurs modernes et est suivie sur https://webstatus.dev/features/anchor-positioning. Pour le centrage général de page, cependant, Flexbox et Grid restent la norme fiable utilisée par les développeurs aujourd’hui.

Conclusion

Le centrage en CSS cesse d’être frustrant une fois que vous faites correspondre la technique au contexte de mise en page. Utilisez margin-inline: auto pour la mise en page en flux horizontal, Flexbox lors de l’alignement de plusieurs éléments, et Grid place-items: center lorsque vous avez simplement besoin de quelque chose au milieu. Cela couvre la grande majorité de ce que vous rencontrerez dans le travail frontend réel.

FAQ

Complete picture for complete understanding

Capture every clue your frontend is leaving so you can instantly get to the root cause of any issue with OpenReplay — the open-source session replay tool for developers. Self-host it in minutes, and have complete control over your customer data.

Check our GitHub repo and join the thousands of developers in our community.