Centrer une div : toutes les méthodes, côte à côte
Centrer une div
Centrer une div : 7 méthodes CSS, en direct et comparées | We.Inc
Centrez une div horizontalement, verticalement ou les deux. Appliquez flexbox, grid, margin auto, le positionnement absolu, text-align et line-height sur une même boîte, voyez le CSS et quand chaque méthode échoue.
Centrer une div dans les deux sens demande deux lignes sur le parent : display: grid; place-items: center; ou display: flex avec justify-content: center et align-items: center. Pour un centrage horizontal seul, donnez une largeur à la div et margin-inline: auto. Le parent doit être plus haut que l'enfant pour que le centrage vertical soit visible.
La version courte
Besoin
CSS sur le parent
Tailwind
Dans les deux sens
display: grid; place-items: center
grid place-items-center
Dans les deux sens
display: flex; justify-content: center; align-items: center
flex items-center justify-center
Bloc horizontal
(sur l'enfant) margin-inline: auto + une largeur
mx-auto w-…
Par-dessus une image
position: relative, enfant inset: 0 + margin: auto
relative / absolute inset-0 m-auto
Choisissez une méthode et un axe : la boîte de démonstration se déplace, le CSS du parent et de l'enfant s'affiche, et une note indique où cette méthode échoue. Sept techniques sont couvertes, y compris les anciennes que vous rencontrerez encore dans du code existant, suivies d'un tableau de décision pour choisir.
Choisissez horizontal, vertical ou les deux.
Passez d'une méthode à l'autre. Les méthodes incapables de gérer l'axe choisi le disent au lieu de faire semblant.
Lisez la note d'échec de la méthode, puis copiez le CSS ou les classes Tailwind.
Consultez le tableau de décision ci-dessous si vous hésitez sur la méthode à utiliser.
Quand un élément refuse de se centrer verticalement, ajoutez d'abord un contour au parent. Neuf fois sur dix, il n'est pas plus haut que son contenu.
Préférez grid ou flex pour du nouveau code. Ils gardent l'enfant dans le flux, donc le parent continue de grandir autour de lui.
Pour centrer un bloc de texte tout en gardant ses lignes alignées à gauche, centrez le bloc avec margin-inline: auto et ne touchez pas à text-align.
margin: auto sur un enfant flex est une astuce élégante : il absorbe l'espace libre de chaque côté et centre uniquement cet élément.
Questions fréquentes
Pourquoi ma div ne se centre-t-elle pas verticalement ?
En général parce que le parent n'a pas de hauteur supplémentaire. Un bloc n'est pas plus haut que son contenu, il n'y a donc aucun espace dans lequel centrer. Donnez au parent une height, une min-height (par exemple 100dvh pour un plein écran) ou laissez-le s'étirer dans une mise en page flex ou grid plus haute.
Quelle est la façon la plus courte de centrer une div ?
display: grid; place-items: center; sur le parent. Cela centre l'enfant dans les deux sens, fonctionne quelle que soit sa taille et ne demande ni largeur ni hauteur sur l'enfant.
Comment centrer une div sur toute la page ?
Donnez au body ou à un conteneur au moins la hauteur du viewport : min-height: 100dvh; display: grid; place-items: center;. Pour une fenêtre modale qui flotte au-dessus de la page, utilisez position: fixed; inset: 0; margin: auto; avec une largeur et une hauteur définies, ou l'élément natif dialog, qui se centre tout seul.
margin: 0 auto fonctionne-t-il encore ?
Oui, pour centrer horizontalement un bloc dont la largeur est inférieure à celle de son parent. margin-inline: auto en est la forme logique moderne et ne touche pas aux marges du haut et du bas.
Comment centrer une div avec Tailwind ?
Mettez flex items-center justify-center, ou grid place-items-center, sur le parent et donnez-lui une hauteur comme h-screen ou min-h-dvh. Pour un bloc centré horizontalement, ajoutez mx-auto et une largeur ou une max-width à l'enfant.
Deux directions, deux problèmes différents
Le centrage horizontal est facile en mise en page bloc, car la largeur est connue : la largeur du parent est fixée par son conteneur, donc les marges auto peuvent se partager l'espace restant. La hauteur, c'est l'inverse : elle dépend du contenu, ce qui explique pourquoi le centrage vertical a demandé des astuces pendant des années.
Flexbox et grid ont changé la donne en laissant le parent répartir l'espace libre sur les deux axes. Dès que le parent a une hauteur connue, les propriétés d'alignement font le reste, et l'enfant reste dans le flux normal.
Quand les anciennes méthodes restent pertinentes
Le positionnement absolu convient quand l'élément centré doit flotter au-dessus d'autres contenus, comme un bouton de lecture sur une miniature vidéo ou un indicateur de chargement sur une carte. La version inset plus margin auto évite les bords flous au demi-pixel qu'un translate peut produire.
text-align reste le moyen le plus rapide de centrer une icône ou un bouton inline dans une ligne de texte. Le centrage par line-height ne convient qu'aux badges d'une seule ligne que vous maîtrisez entièrement.
Tableau de décision
Quelle méthode pour quel usage
Méthode
Horizontal
Vertical
Les deux
Points de vigilance
Flexbox
Oui
Oui
Oui
Le centrage vertical exige que le parent soit plus haut que l'enfant. Avec flex-direction: column, les deux propriétés échangent leurs axes.
Grid place-items
Oui
Oui
Oui
Plusieurs enfants s'empilent en lignes, chacun centré dans sa propre ligne, ils s'étalent donc verticalement au lieu de rester groupés. Enveloppez-les dans un seul élément.
margin: auto
Oui
Non
Non
Dans le flux bloc normal, il ne centre qu'horizontalement, et seulement si l'enfant a une largeur inférieure à celle du parent. Dans un parent flex ou grid, margin: auto centre dans les deux sens.
Absolute + transform
Oui
Oui
Oui
L'enfant sort du flux, donc le parent ne grandit plus autour de lui. Les décalages d'un demi-pixel peuvent rendre le texte flou, et le transform fait de l'enfant un bloc conteneur et un contexte d'empilement.
Absolute inset + margin auto
Oui
Oui
Oui
L'enfant a besoin d'une taille explicite sur l'axe centré. Sans elle, inset: 0 étire simplement l'enfant pour remplir le parent. Les largeurs fit-content fonctionnent aussi dans les navigateurs actuels.
text-align: center
Oui
Non
Non
Ne déplace que le contenu inline : texte, images, boîtes inline-block. Une div bloc normale l'ignore, et le texte à l'intérieur de l'enfant hérite aussi du centrage.
Non
Oui
Oui
Casse dès que le texte passe sur une deuxième ligne, et la hauteur doit être codée en dur deux fois. Convient à un badge ou un bouton d'une seule ligne, rien d'autre.
Recettes prêtes à copier
Une carte au milieu de l'écran
Sur une vraie page, utilisez min-height: 100dvh sur le conteneur. Le cadre ici a une hauteur fixe pour tenir dans la page.
Bouton de lecture sur une miniature
inset: 0 avec margin: auto centre un enfant de taille fixe sans transform, donc les bords restent nets.
Un élément centré, les autres sur les bords
Les marges auto sur un enfant flex prennent tout l'espace libre, donc le logo se place au milieu de la barre tandis que le menu et le panier restent sur les côtés.
Le centrage vertical exige que le parent soit plus haut que l'enfant. Avec flex-direction: column, les deux propriétés échangent leurs axes.
Plusieurs enfants s'empilent en lignes, chacun centré dans sa propre ligne, ils s'étalent donc verticalement au lieu de rester groupés. Enveloppez-les dans un seul élément.
Dans le flux bloc normal, il ne centre qu'horizontalement, et seulement si l'enfant a une largeur inférieure à celle du parent. Dans un parent flex ou grid, margin: auto centre dans les deux sens.
L'enfant sort du flux, donc le parent ne grandit plus autour de lui. Les décalages d'un demi-pixel peuvent rendre le texte flou, et le transform fait de l'enfant un bloc conteneur et un contexte d'empilement.
L'enfant a besoin d'une taille explicite sur l'axe centré. Sans elle, inset: 0 étire simplement l'enfant pour remplir le parent. Les largeurs fit-content fonctionnent aussi dans les navigateurs actuels.
Ne déplace que le contenu inline : texte, images, boîtes inline-block. Une div bloc normale l'ignore, et le texte à l'intérieur de l'enfant hérite aussi du centrage.
Casse dès que le texte passe sur une deuxième ligne, et la hauteur doit être codée en dur deux fois. Convient à un badge ou un bouton d'une seule ligne, rien d'autre.
Essayez chaque méthode de centrage
Axe
Centrer
Méthode
Parent (pointillés) et enfant (bleu)
Boîte enfant
Cette méthode ne gère pas cet axe. La boîte montre où elle se place sans lui.