Design comparison
SolutionDesign
Solution retrospective
I feel like there is a better way to center the card on the body.
Community feedback
- @purnimakumarrPosted over 2 years ago
Hi Noel, There are 3 most effective & widely used ways to center an element (in this case, the card component) inside a container (in this case, the body).
- Using
position
property
<body> <div class="container"></div> </body>
body { position: relative; height: 100vh; } .container { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); }
- Using CSS Flexbox
body { height: 100vh; display: flex; align-items: center; justify-content: center; }
- Using CSS Grid
body { height: 100vh; display: grid; place-items: center; }
All 3 ways are correct and acceptable. I usually prefer CSS Grid for the job.
1@NoelVegaJrPosted over 2 years ago@purnimakumarr
Thank you for the detailed response. Much appreciated 😄
0 - Using
Please log in to post a comment
Log in with GitHubJoin our Discord community
Join thousands of Frontend Mentor community members taking the challenges, sharing resources, helping each other, and chatting about all things front-end!
Join our Discord