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 :
- Flexbox 🏋️
- Grid 🔱
- Hack (expliqué) 💥
#RT ❤️
🧵 #thread #css #web
1. 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
2. Flex
Un peu comme grid mais sans le shorthand, donc il faut 3 lignes !
Je ne vais pas en expliquer plus 👍
3. Hack
Ici, on utilise plusieurs principes !
On doit définir le parent comme relatif et l'enfant comme 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
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éplacé de la moitié de sa taille en haut et en bas !
Voici donc le css snippet pour reproduire cet effet !
Rien de mieux que de tester, donc voici un CodeSandBox : codesandbox.io/s/center-a-div…
Tu y trouveras les 3 solutions pour centrer une div !
Thread beaucoup plus léger aujourd'hui !
Follow @melvynxdev ❤️
Dernier Thread :
Share this Scrolly Tale with your friends.
A Scrolly Tale is a new way to read Twitter threads with a more visually immersive experience.
Discover more beautiful Scrolly Tales like this.