Design comparison
SolutionDesign
Solution retrospective
difficulty in centering the div vertically
Community feedback
- @purnimakumarrPosted over 2 years ago
Hi Hatem, There are 3 most effective & widely used ways to center an element (in this case, the QR code 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. You can read this article 11 Ways to Center Div or Text in CSS on Hub Spot to learn more on this topic.
0 - Using
- @afaiz-spacePosted over 2 years ago
Hey @HatemGw, congratulation on completing the challenge.
- remove extra content or do comment.
0
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