Comment centrer une div (3 moyens)

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 🔱
Flexbox 🏋️
Hack (expliqué) 💥

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.

Flexbox 🏋️

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.

Hack 💥

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

.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.

.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 !

.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.

Conclusion

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 😉

Recommendations

Écris par Melvyn Malherbe

J'ai aidé 200 personnes à apprendre React et Next.js. Je suis un créateur de contenu et un développeur web. Plus de 2'600 personnes reçoivent mes newsletter par email chaque semaine.

En apprendre plus à propos de moi