Design comparison
Solution retrospective
I still can not figure out how to vertically center my <main> element. I have tried align-items with flex multiple times but it just doesn't work. I would love to hear any feedback on how to align any div element to the center relative to the screen size of the browser.
Would also love any other tips you could give me. Currently learning responsive CSS, although not doing great atm.
Community feedback
- @guilleoemPosted over 2 years ago
Hi @zach007james. Remove
margin-top: 8vh;property in main, then change the height of the body to 100vh instead of 100%.0 - @ComanderPotatoPosted over 2 years ago
To centre a div, the flex properties have to be set on the parent element of the div you want to centre. Centre also takes into account the height of the parent div, so say if you have a landing page and want something right in the middle setting the parent element to height: 100vh; should centre it.
0
Please log in to post a comment
Log in with GitHub
Join 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