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

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%;
}

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%);
}

Voici le code final avec l'exemple :

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 😉