Retour • 13/06/2022

Comment centrer une div (3 moyens)

Écris par Melvyn Malherbe le 13/06/2022

Comment centrer une div en CSS 🏋️ Je vois encore et toujours passer ce meme 🤯 Rejoins l'élite en connaissant tous les moyens de centrer une div 📢

Voici les 3 solutions :

Grid 🔱

Je le présente en premier car il tient littéralement en deux lignes de code ! Plus aucune excuse !

Le place-content est un shorthand pour définir align-content et justify-content simultanément.

Test les deux lignes commentées en supprimant place-content: center; pour voir comment elle agissent avec Grid

Donc avec align-content on définit l'alignement vertical et justify-content l'alignement horizontal.

Un peu comme grid, mais sans le shorthand, donc il faut 3 lignes !

Avec align-items on définit l'alignement vertical et justify-content l'alignement horizontal.

Ici, on utilise plusieurs principes ! On doit définir le parent comme relatif et l'enfant comme absolute !

CSS

.container {
  position: relative;
}

.item {
  position: absolute;
}

L'enfant va être déplacé en top 50% et left 50% ce qui signifie qu'il se déplace après le milieu de chaque axe.

CSS

.item {
  position: absolute;
  top: 50%;
  left: 50%;
}

red square aligned to the bottom left of the middle line

Une fois déplacé ici, on va utiliser transform pour bouger notre carré rouge à droite et en haut de 50%

Il faut savoir que pour transalte : 100% = la taille du carré rouge 🟥

Donc le déplacer avec ses deux axes signifie : déplacer de la moitié de sa taille en haut et en bas !

CSS

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

square centred with arrow to see the movement of transform

Voici le code final avec l'exemple :

Essaie de supprimer la ligne top/left puis transform pour voir comment ça fonctionne.

Tu es maintenant un expert pour centrer une div.

PS : Ceci est un premier article, test de base. Il est basé sur un thread Twitter. Les prochains seront plus poussés 😉