Docs CSS exécutables : Centrer une div

Q: Comment centrer une div horizontalement et verticalement ?

Faites du parent une grille et centrez son contenu : .parent { display: grid; place-items: center; }. La version flexbox est display: flex; justify-content: center; align-items: center;. Dans les deux cas, le parent doit être plus haut que la div.

Q: Quelle est la façon la plus simple de centrer une div ?

display: grid; place-items: center; sur le parent : deux déclarations, les deux axes, un enfant de n'importe quelle taille. Utilisez flexbox quand le parent dispose aussi d'autres éléments en ligne.

Q: Comment centrer du texte dans une div ?

Utilisez text-align: center sur la div pour le texte et le contenu inline. Centrer la div elle-même et centrer le texte qu'elle contient sont deux tâches distinctes.

La réponse courte

Pour centrer une div horizontalement et verticalement dans son parent, faites du parent une grille et centrez son contenu :

.parent {
  display: grid;
  place-items: center;
  min-height: 200px; /* the parent needs room to center in */
}

Cela fonctionne pour un enfant de n'importe quelle taille et ne demande rien sur l'enfant lui-même. Voici six méthodes côte à côte. Chaque boîte se mesure après son affichage et indique l'écart entre son centre et celui de son parent :

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Six ways to center</title>
  <style>
    body { font-family: system-ui, sans-serif; font-size: 12px; margin: 8px; }
    .grid-of-demos { display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: 10px; }
    .stage { height: 130px; background: #e5e7eb; border: 1px solid #9ca3af; }
    .box { width: 100px; padding: 8px; background: #2563eb; color: white; text-align: center; }
    p { margin: 4px 0 0; }

    .flex { display: flex; justify-content: center; align-items: center; }
    .grid { display: grid; place-items: center; }
    .auto { display: flex; }
    .auto .box { margin: auto; }
    .abs { position: relative; }
    .abs .box { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); }
    .inset { position: relative; }
    .inset .box { position: absolute; inset: 0; margin: auto; height: 20px; }
    .content { align-content: center; }
    .content .box { margin-inline: auto; }
  </style>
</head>
<body>
  <div class="grid-of-demos">
    <div><div class="stage flex"><div class="box">flex</div></div><p></p></div>
    <div><div class="stage grid"><div class="box">grid</div></div><p></p></div>
    <div><div class="stage auto"><div class="box">margin: auto</div></div><p></p></div>
    <div><div class="stage abs"><div class="box">absolute</div></div><p></p></div>
    <div><div class="stage inset"><div class="box">inset: 0</div></div><p></p></div>
    <div><div class="stage content"><div class="box">align-content</div></div><p></p></div>
  </div>
  <script>
    document.querySelectorAll('.stage').forEach((stage) => {
      const s = stage.getBoundingClientRect();
      const b = stage.querySelector('.box').getBoundingClientRect();
      const dx = (b.left + b.width / 2) - (s.left + s.width / 2);
      const dy = (b.top + b.height / 2) - (s.top + s.height / 2);
      stage.nextElementSibling.textContent =
        'off center: x ' + Math.round(dx) + 'px, y ' + Math.round(dy) + 'px';
    });
  </script>
</body>
</html>

Les six indiquent 0px sur les deux axes (la bordure de 1px de la scène est identique de chaque côté, elle ne décale donc pas le centre). Changez la largeur ou le texte d'une boîte et relancez : les méthodes qui ne dépendent pas d'une taille fixe restent à 0.

Quelle méthode utiliser

Méthode	Centre	L'enfant a-t-il besoin d'une taille fixe ?	Idéal pour
Grid `place-items: center`	Les deux axes	Non	Le choix par défaut : un enfant dans une boîte
Flexbox `justify-content` + `align-items`	Les deux axes	Non	Une ligne ou une colonne d'éléments, centrés en groupe
`margin: auto` dans un parent flex ou grid	Les deux axes	Non	Centrer un élément pendant que ses frères sont disposés autrement
`margin: 0 auto`	Horizontal seulement	Une `width` ou `max-width`	Conteneurs de page, articles, formulaires dans le flux normal
Absolute + `translate(-50%, -50%)`	Les deux axes	Non	Surcouches, badges et modales au-dessus d'un autre contenu
Absolute + `inset: 0; margin: auto`	Les deux axes	Oui, largeur et hauteur	Boîtes de dialogue de taille fixe
`align-content: center` sur un bloc	Vertical	Non	Centrer verticalement sans changer le display du parent

Méthode 1 : flexbox

Flexbox centre sur deux axes avec deux propriétés. justify-content gère l'axe principal (horizontal sur une ligne), et align-items l'axe secondaire :

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Center with flexbox</title>
  <style>
    body { font-family: system-ui, sans-serif; }
    .parent {
      display: flex;
      justify-content: center; /* horizontal */
      align-items: center;     /* vertical */
      gap: 8px;
      height: 180px;
      background: #e5e7eb;
    }
    .child { padding: 12px 16px; background: #16a34a; color: white; }
  </style>
</head>
<body>
  <div class="parent" id="parent">
    <div class="child">One</div>
    <div class="child">Two</div>
    <div class="child">Three</div>
  </div>
</body>
</html>

Avec plusieurs enfants, flexbox les centre en groupe en les gardant sur une ligne. C'est là qu'il l'emporte sur grid, qui empilerait les trois éléments dans une colonne centrée. La page justify-content présente toutes les valeurs d'alignement.

Méthode 2 : grid

place-items: center est le raccourci de align-items: center plus justify-items: center. Sur un conteneur grid avec un seul enfant, il centre cet enfant dans les deux directions :

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Center with grid</title>
  <style>
    body { font-family: system-ui, sans-serif; }
    .parent {
      display: grid;
      place-items: center;
      min-height: 180px;
      background: #e5e7eb;
    }
    .card { max-width: 220px; padding: 16px; background: white; border: 2px solid #2563eb; border-radius: 8px; }
  </style>
</head>
<body>
  <div class="parent" id="parent">
    <div class="card" id="card">A card of any size, centered by its parent.</div>
  </div>
</body>
</html>

min-height plutôt que height permet au parent de grandir si la carte dépasse 180px de haut, au lieu que la carte déborde.

Méthode 3 : margin: 0 auto (horizontal)

Un élément de type bloc dont la largeur est inférieure à celle de son conteneur peut être centré horizontalement avec des marges latérales automatiques. Le navigateur partage l'espace libre à parts égales entre les deux côtés :

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>margin auto</title>
  <style>
    body { font-family: system-ui, sans-serif; margin: 0; }
    .page {
      max-width: 360px;
      margin: 0 auto;          /* same as margin-inline: auto */
      padding: 16px;
      background: #fef3c7; border: 2px solid #f59e0b;
    }
    .no-width { margin: 12px auto 0; padding: 16px; background: #fee2e2; border: 2px solid #dc2626; }
  </style>
</head>
<body>
  <div class="page" id="page">max-width: 360px and margin: 0 auto</div>
  <div class="no-width" id="nowidth">margin: auto without a width: nothing to center</div>
</body>
</html>

La deuxième boîte remplit toute la largeur : il n'y a pas d'espace libre et rien ne bouge. C'est la raison habituelle pour laquelle margin: 0 auto « ne fonctionne pas ». Il ne centre aussi qu'horizontalement dans le flux normal ; les marges auto verticales y valent 0. Dans un parent flex ou grid, en revanche, margin: auto centre dans les deux directions : c'est la troisième boîte de la comparaison ci-dessus.

Méthode 4 : position absolue et transform

Quand l'élément doit se placer au-dessus d'un autre contenu (un badge sur une photo, une modale sur la page), positionnez-le en absolu à 50 % et reculez-le de la moitié de sa propre taille :

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Absolute centering</title>
  <style>
    body { font-family: system-ui, sans-serif; }
    .photo {
      position: relative;      /* the reference box */
      height: 180px;
      background: linear-gradient(135deg, #bfdbfe, #1e3a8a);
    }
    .play {
      position: absolute;
      top: 50%;
      left: 50%;
      transform: translate(-50%, -50%);
      padding: 12px 20px;
      background: white; border-radius: 999px; font-weight: 700;
    }
  </style>
</head>
<body>
  <div class="photo" id="photo">
    <div class="play" id="play">Play</div>
  </div>
</body>
</html>

top: 50%; left: 50% place le coin supérieur gauche de l'élément au centre. Les pourcentages de translate() se rapportent à la taille de l'élément lui-même : -50% le recule donc de la moitié de sa largeur et de sa hauteur, quelles qu'elles soient. Le parent doit être positionné (position: relative), sinon l'élément se centre sur la page. Le positionnement est traité sur la page position.

Une variante pour les éléments de taille connue : position: absolute; inset: 0; margin: auto; plus une width et une height. Les marges automatiques partagent l'espace sur les quatre côtés.

Méthode 5 : align-content sur un bloc normal

align-content: center fonctionne désormais aussi sur les conteneurs de type bloc ordinaires, pas seulement flex et grid. Il centre le contenu verticalement sans changer la disposition des enfants :

.parent {
  min-height: 200px;
  align-content: center;   /* vertical centering, still display: block */
}
.child {
  max-width: 300px;
  margin-inline: auto;     /* horizontal centering */
}

Il est pris en charge par les versions actuelles de Chrome, Firefox et Safari. Les anciens navigateurs l'ignorent, utilisez donc grid si vous devez les prendre en charge.

Centrer sur tout l'écran

Pour centrer une boîte de dialogue dans le viewport quel que soit le défilement, combinez une couche plein écran fixed avec grid :

.overlay {
  position: fixed;
  inset: 0;                     /* covers the viewport */
  display: grid;
  place-items: center;
  background: rgb(0 0 0 / 50%);
}

Pour centrer verticalement le contenu de toute une page, utilisez min-height: 100dvh sur le parent plutôt que 100vh : sur téléphone, 100vh inclut la zone située derrière les barres d'outils du navigateur, et le « centre » se retrouve trop bas.

Centrer du texte est une autre tâche

Tout ce qui précède centre une boîte. Pour centrer le texte à l'intérieur d'une boîte, utilisez text-align: center sur celle-ci, comme le montre la page centrer du texte en HTML. Il faut souvent les deux : grid pour centrer la carte, et text-align pour centrer les lignes qu'elle contient.

Erreurs courantes

Un parent sans hauteur. Le centrage vertical a besoin d'espace libre ; un parent qui se réduit à son contenu n'en a pas.
margin: 0 auto sur un bloc pleine largeur. Donnez-lui d'abord une width ou une max-width.
margin: auto pour centrer verticalement dans le flux normal. Les marges auto verticales y valent 0 ; utilisez flex ou grid.
Un centrage absolu sans parent positionné. L'élément se centre dans la page, pas dans la boîte.
align-items: center sur l'enfant. Les propriétés d'alignement se placent sur le parent (le conteneur flex ou grid), sauf margin: auto et align-self.
text-align: center pour centrer un bloc. Il centre le contenu inline (texte, images, enfants inline-block), pas un enfant de type bloc.

Questions fréquentes

Comment centrer une div horizontalement et verticalement ?

Faites du parent une grille et centrez son contenu : .parent { display: grid; place-items: center; }. La version flexbox est display: flex; justify-content: center; align-items: center;. Dans les deux cas, le parent doit être plus haut que la div.

Comment centrer une div seulement horizontalement ?

Donnez-lui une largeur et des marges latérales automatiques : .box { width: 300px; margin: 0 auto; } (ou max-width pour un bloc responsive). margin-inline: auto est la même chose en propriétés logiques.

Pourquoi margin: 0 auto ne centre-t-il pas ma div ?

La div n'a pas de largeur inférieure à celle de son conteneur, il n'y a donc pas d'espace libre à partager (un bloc remplit toute la largeur par défaut). Définissez width ou max-width. Cela ne fait rien non plus sur les éléments inline et ne centre jamais verticalement dans le flux normal.

Pourquoi ma div ne se centre-t-elle pas verticalement ?

Le parent n'est pas plus haut que son contenu, il n'y a donc pas d'espace supplémentaire où centrer. Donnez une hauteur (ou une min-height) au parent, puis utilisez le centrage grid ou flexbox.

Quelle est la façon la plus simple de centrer une div ?

display: grid; place-items: center; sur le parent : deux déclarations, les deux axes, un enfant de n'importe quelle taille. Utilisez flexbox quand le parent dispose aussi d'autres éléments en ligne.

Comment centrer du texte dans une div ?

Utilisez text-align: center sur la div pour le texte et le contenu inline. Centrer la div elle-même et centrer le texte qu'elle contient sont deux tâches distinctes.

Concepts liés