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
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
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 👍
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
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 !
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 !
Tu y trouveras les 3 solutions pour centrer une div !
Thread beaucoup plus léger aujourd'hui !
Follow @melvynxdev ❤️
Dernier Thread :
Follow @melvynxdev ❤️
Dernier Thread :
https://twitter.com/melvynxdev/status/1536008534885801986?s=20&t=nmpdU3Cd2gKgqP6ogWK8yQ
• • •
Missing some Tweet in this thread? You can try to
force a refresh
