Comment centrer une div à l’aide de la grille CSS

Dans cet article, nous examinerons quatre façons de centrer horizontalement et verticalement un div à l’aide de CSS Grid. Bien entendu, ces techniques de centrage peuvent être utilisées sur tout type d’élément. Nous avons déjà expliqué comment centrer des éléments horizontalement et verticalement à l’aide de Boîte flexible et positionnement avec transformations.

Mise en place

Commençons par créer un conteneur avec un simple élément de boîte à l’intérieur que nous utiliserons pour démontrer ces méthodes de centrage. Voici le HTML :

<article>
  <div></div>
</article>

Et voici notre CSS de départ :

article {
  width: 100%;
  min-height: 100vh;
  background: black;
  display: grid;
}

div {
  width: 200px;
  background: yellow;
  height: 100px;
}

Dans tous nos exemples, nous utiliserons le display: grid propriété. Ceci établit le <article> comme conteneur de grille et génère une grille au niveau du bloc pour ce conteneur. (Voici notre modèle de démonstration sur CodePen si vous voulez l’expérimenter.)

Maintenant, regardons les différentes manières de centrer notre div.

1. Centrer une Div avec CSS Grid et place-self

Ma façon préférée de centrer un élément avec Grid est d’utiliser le place-self propriété. (Vous pouvez en savoir plus à ce sujet ici.)

Centrer notre div est aussi simple que ceci :

article {
  display: grid;
}

div {
  place-self: center;
}

Voir le stylo
Centrage à l’aide de Grid et place-self par SitePoint (@SitePoint)
sur CodePen.

La place-self propriété est un raccourci pour la align-self (vertical) et justify-self propriétés (horizontales) (qui sont utiles si vous vous concentrez uniquement sur un axe). Vous pouvez les expérimenter dans cette démo CodePen.

Utilisant place-self est si simple que c’est une solution évidente. Mais ce n’est pas la seule façon de centrer un élément avec Grid, alors regardons maintenant d’autres méthodes.

Un avantage à utiliser place-self est qu’il est appliqué à l’élément centré, ce qui signifie que vous pouvez également l’utiliser pour centrer d’autres éléments dans le même conteneur. (Essayez d’ajouter plus d’éléments div à la démo CodePen et voyez ce qui se passe.)

2. Centrer une Div avec CSS Grid, justifier le contenu et aligner les éléments

Regardons maintenant ce qu’implique l’utilisation de Grid avec justify-content et align-items pour centrer notre div.

La justify-content La propriété est utilisée pour aligner les éléments du conteneur horizontalement lorsque les éléments n’utilisent pas tout l’espace disponible. Il existe de nombreuses façons de régler le justify-content propriété, mais ici, nous allons simplement la définir sur center.

Tout comme le justify-content propriété, la align-items La propriété est utilisée pour aligner le contenu dans un conteneur, mais elle aligne le contenu verticalement plutôt qu’horizontalement.

Revenons à notre test HTML et ajoutons le code suivant au conteneur parent :

article {
  display: grid;
  justify-content: center;
  align-items: center;
}

Voir le stylo
Centrage à l’aide de la grille, alignement et justification par SitePoint (@SitePoint)
sur CodePen.

Un avantage apparent de cette méthode est qu’elle implique moins de code, car le centrage est géré par le conteneur. Mais à certains égards, il est également désavantageux de cibler la div via son conteneur, car tout autre élément du conteneur sera également affecté.

3. Centrer une Div avec une grille CSS et des marges automatiques

Comme toujours, nous ciblerons le conteneur parent avec display: grid. Nous attribuerons également à la div une marge automatique en utilisant margin: auto. Cela oblige le navigateur à calculer automatiquement l’espace disponible autour de la div enfant et à la diviser verticalement et horizontalement, en plaçant la div au milieu :

article {
  display: grid;
}

div {
  margin: auto;
}

Voir le stylo
Centrer un élément avec la grille CSS, justifier le contenu et aligner les éléments par SitePoint (@SitePoint)
sur CodePen.

(En passant, il y a beaucoup d’autres choses sympas que vous pouvez faire avec des marges CSS.)

4. Centrer une Div avec CSS Grid et place-items

La place-items La propriété est utilisée pour aligner les éléments verticalement et horizontalement dans une grille. Il peut être utilisé pour centrer notre div en ciblant le conteneur comme ceci :

article {
  display: grid;
  place-items: center;
}

Voir le stylo
Centrer une div avec une grille CSS et des marges automatiques par SitePoint (@SitePoint)
sur CodePen.

Comme le place-self propriété, place-items est un raccourci pour deux propriétés, dans ce cas justify-items (horizontale) et align-items (vertical). Vous pouvez les expérimenter dans cette démo CodePen.

Contrairement à place-self, place-items est appliqué sur le contenant, ce qui lui donne un peu moins de souplesse.

Conclusion

Chacune de ces méthodes vous permet de centrer un div horizontalement et verticalement dans un conteneur. Comme je l’ai dit, ma préférence va au place-self méthode, principalement parce qu’elle est appliquée à l’élément centré plutôt qu’au conteneur. C’est pareil pour le margin: auto méthode. Mais bien sûr, si vous ne cherchez qu’à centrer votre élément dans une direction, vous pouvez également utiliser soit align-self ou justify-self.

Dans les exemples de démonstration, nous venons d’utiliser une div vide, mais bien sûr, vous pouvez ajouter du contenu à la div et le centrage fonctionnera toujours. Et, encore une fois, ces techniques de centrage fonctionnent sur des éléments autres que les divs.

Lecture complémentaire :