Design comparison
Solution retrospective
What did you find difficult while building the project?
- What is the best approach to center the element to middle of the webpage?Which areas of your code are you unsure of?
- none.Do you have any questions about best practices?
- To center the element in the middle I set min-height to <main> and used the display flex and center approach. Is this a best approach available, if better solution available, please share some examples or resource.
Community feedback
- @KhawarmehfoozPosted over 1 year ago
Hey there, congratulations on completing this challenge, and you absolutely nailed it! I just wanted to answer your query about centering the card. The flex property approach you mentioned is indeed a good solution. However, I'd like to share an alternative approach with you.
To center the element perfectly, you can try setting the height of the
<body>
element to100vh
(which ensures it takes up the full viewport height) and use thedisplay: grid
property withplace-items: center
. This approach will also center the card flawlessly.Here's an example of how you can achieve this:
body { height: 100vh; display: grid; place-items: center; }
Feel free to give it a try and see if it works for your specific case. Good luck, and keep up the great work!
Marked as helpful0@nithincspnrPosted over 1 year agoThanks for the detailed response @Khawarmehfooz. Your approach will definitely help me.
I am very new to this platform and really liked the support from this community. Hope I will have more learning opportunities here.
Thanks
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