Design comparison
SolutionDesign
Solution retrospective
During my project journey, l found it difficult to center my content exactly in the middle. whether l should use, position relative , position absolute, or just set margin auto on both sides and then specify some top margins as well.
With regards to this, l would love to hear from any of you on best practices for centering contents. Thank you.
Community feedback
- @VickyAzolaPosted over 1 year ago
Hi there! Great work finishing this challenge!
To center the card vertically and horizontally you can use grid or flex on the body:
with grid:
body { min-height: 100vh; display: grid; place-content: center; }
- Here is more info about display grid
- Here is a fun game to practice with grid properties
with flex:
body { min-height: 100vh; display: flex; flex-direction: column; justify-content: center; align-items: center; }
- Here is more info about display flex
- Here is a fun game to practice with flex properties
Hope this helps!
1
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