Design comparison
Solution retrospective
Does flexbox only center the div vertically if you set a height to it?
In my case, it did center the div horizontally but not vertically until I set min-height: 100vh to the body. Please anyone explain, thank you!
Community feedback
- @djbedfordPosted about 2 years ago
Hey, yes you are correct in your thinking. The reason you need to set the height is because height is determined by the content, so when you try and center it vertically there is no room to adjust as it is already taking up it's full height. Now when you set the height to 100vh or something equivalent it has more room in order to palce the content centrally.
You can check out this article on MDN for a better explanation of how to align items https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Flexible_Box_Layout/Aligning_Items_in_a_Flex_Container or I find CSS-TRICKS a good reference, here is their explanation for the align-items property https://css-tricks.com/almanac/properties/a/align-items/
Hope this helps.
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