Hey guys, hope y'all are doing great! So I finally cracked the code on this magic CSS snippet that's been my secret weapon for centering content like a boss across projects - body { min-height: 100vh; display: flex; align-items: center; justify-content: center; } Honestly, until now, I've always used it without really grasping why it worked so well. But curiosity got the best of me, and I decided to dive in! So here's the lowdown on this bad boy… ️♂️ What It Does: This snippet centers whatever falls within our dear friend the <body> tag. By making the body take up the full height of the viewport (100vh), setting its display to flex, and using align-items and justify-content properties, this little gem ensures your content gets centered - perfectly both vertically and horizontally! Now I'm curious - do y'all understand how it works? I'd love to hear your thoughts on this one!
Source:
https://dev.to/alok38/i-finally-understood-this-magic-css-snippet-5237