Centrer une div en CSS : horizontalement, verticalement et les deux (Flexbox, Grid, margin auto)

Centrer une div en CSS a longtemps demandé des astuces. Ce n’est plus le cas : trois lignes de Flexbox centrent n’importe quel élément dans son conteneur, horizontalement et verticalement. Cet article commence par cette réponse courte, puis détaille chaque situation, du centrage d’une image à celui d’un bouton, avec l’alternative Grid et les erreurs qui font croire que « ça ne marche pas ».

La réponse courte

.conteneur {
  display: flex;
  justify-content: center; /* horizontal */
  align-items: center;     /* vertical */
}

<div class="conteneur">
  <div class="boite">Je suis centrée</div>
</div>

Les deux propriétés se posent sur le parent, jamais sur l’élément à centrer. Et le centrage vertical ne se voit que si le parent a une hauteur plus grande que son contenu : c’est la première chose à vérifier quand rien ne bouge.

Centrer horizontalement

Avec Flexbox

justify-content répartit les enfants le long de l’axe principal, horizontal par défaut. center les regroupe au milieu.

.conteneur {
  display: flex;
  justify-content: center;
  gap: 1rem; /* espace entre plusieurs enfants centrés */
}

Avec plusieurs enfants, ils restent côte à côte, centrés en groupe. C’est le cas des deux paragraphes ou des deux images de l’exemple historique de cet article.

Avec margin auto

Sans Flexbox, un bloc de largeur connue se centre avec des marges automatiques :

.boite {
  width: 320px;      /* ou max-width : indispensable */
  margin: 0 auto;
}

Sans width ni max-width, la boîte occupe toute la largeur disponible et les marges automatiques valent zéro. C’est la méthode à retenir pour centrer une colonne de contenu dans une page.

Avec text-align

text-align: center centre le contenu en ligne d’un bloc : du texte, un lien, une image inline. Il ne centre pas le bloc lui-même dans son parent.

.titre {
  text-align: center; /* centre le texte à l'intérieur de .titre */
}

Centrer verticalement

align-items gère l’axe transversal, vertical par défaut. Le conteneur doit avoir une hauteur pour que le centrage soit visible.

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

Pour ne centrer verticalement qu’un seul enfant et laisser les autres en haut, align-self se pose sur cet enfant :

.conteneur .dernier {
  align-self: center;
}

Autre écriture, souvent plus courte : margin: auto sur l’enfant d’un conteneur flex le centre dans les deux directions, en absorbant tout l’espace libre.

.conteneur { display: flex; height: 300px; }
.boite     { margin: auto; }

Centrer sur toute la page

Un écran de connexion, un message d’erreur, une page d’attente : l’élément doit être au centre de la fenêtre. Le conteneur prend toute la hauteur visible avec min-height: 100vh.

body {
  margin: 0;
}

.page {
  display: flex;
  justify-content: center;
  align-items: center;
  min-height: 100vh; /* 100 % de la hauteur de la fenêtre */
}

min-height plutôt que height : si le contenu dépasse la fenêtre sur un petit écran, le conteneur s’agrandit au lieu de couper. Sur mobile, 100dvh (hauteur dynamique, qui tient compte des barres du navigateur) est encore plus juste et pris en charge par les navigateurs actuels.

Centrer une image

Une image est un élément en ligne : dans un bloc, text-align: center sur le parent la centre horizontalement. Pour la centrer dans les deux sens, ou dans un cadre de taille fixe, Flexbox est plus simple.

/* Horizontal seulement */
figure {
  text-align: center;
}

/* Horizontal et vertical, dans une vignette carrée */
.vignette {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 200px;
  height: 200px;
  overflow: hidden;
}

.vignette img {
  max-width: 100%;
  max-height: 100%;
  object-fit: contain;
}

Une image seule dans une colonne se centre aussi en bloc : display: block; margin: 0 auto; avec une largeur ou une largeur maximale.

Centrer un texte et un bouton

Un texte se centre avec text-align: center sur son bloc. Un bouton est un élément inline-block : la même propriété sur son parent le centre horizontalement.

.actions {
  text-align: center;
}

/* Pour centrer plusieurs boutons avec un espacement régulier */
.actions {
  display: flex;
  justify-content: center;
  gap: 0.75rem;
}

Pour centrer le texte à l’intérieur d’un bouton de hauteur fixe, le bouton lui-même devient un conteneur flex : display: inline-flex; align-items: center; justify-content: center;.

L’alternative Grid : une seule ligne

CSS Grid centre un enfant unique en une déclaration :

.conteneur {
  display: grid;
  place-items: center; /* align-items + justify-items */
  min-height: 100vh;
}

Grid et Flexbox donnent ici le même résultat. Grid est plus court pour un seul élément, Flexbox reste plus naturel pour aligner une rangée d’éléments. Le choix entre les deux modèles pour une mise en page complète est détaillé dans Grid ou Flexbox.

position absolute + transform : le cas des superpositions

Quand l’élément à centrer est sorti du flux, par exemple une infobulle ou une fenêtre modale posée par-dessus la page, on le positionne à 50 % puis on le recule de la moitié de sa propre taille :

.parent {
  position: relative;
}

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

La méthode marche sans connaître la taille de l’élément, mais elle peut rendre le texte légèrement flou quand la translation tombe sur une demi-pixel. Pour une modale plein écran, un conteneur position: fixed; inset: 0; display: grid; place-items: center; évite le problème.

Pourquoi « ça ne marche pas » : les cinq erreurs

1. Le parent n’a pas de hauteur. Le centrage vertical est relatif à la hauteur du conteneur, sans hauteur, il n’y a rien à centrer. Ajoutez min-height.
2. Les propriétés sont sur l’enfant. justify-content et align-items vont sur le parent. Sur l’enfant, seuls align-self et margin: auto agissent.
3. margin: 0 auto sans largeur. Le bloc prend déjà 100 % : donnez-lui une width ou une max-width.
4. text-align: center pour centrer une div. Il centre le texte dedans, pas la boîte. Utilisez Flexbox ou les marges automatiques.
5. height: 100% qui ne fait rien. Un pourcentage de hauteur ne vaut que si le parent a lui-même une hauteur définie, jusqu’à html. 100vh ou 100dvh ne dépendent pas du parent.

Récapitulatif

Pour aller plus loin que le centrage, le guide complet de Flexbox passe en revue toutes les propriétés du conteneur et des enfants.