Welcome to the Treehouse Community
Want to collaborate on code errors? Have bugs you need feedback on? Looking for an extra set of eyes on your latest project? Get support with fellow developers, designers, and programmers of all backgrounds and skill levels here with the Treehouse Community! While you're at it, check out some resources Treehouse students have shared here.
Looking to learn something new?
Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and join thousands of Treehouse students and alumni in the community today.
Start your free trial
<noob />
17,062 Pointshaving trouble with centering the content with flexbox
Hey i just had fun and tried to create a cool 404 error page. now i had trouble to center vertically the content on the page but manage to fix it with adding height: 100vh.
snapshot: http://w.trhou.se/7fkwy1icc4
anyone can explain why?
2 Answers
Steven Parker
231,248 PointsYou can only vertically center within a container that has an explicit height. Otherwise, the height will be only what's necessary for the content.
The 100vh setting makes use of the entire window which is what you want for a centered appearance.
<noob />
17,062 Pointswhat do u mean by "other elements"? and yes it did worked.
Steven Parker
231,248 PointsThe "other elements" are the ones currently inside the "content" div: the image, paragraph, and button.
<noob />
17,062 Points<noob />
17,062 PointsOk, but why i need to define a second container(the content div) in order to make it work? i used the css rule on the wrapper not on the container
Steven Parker
231,248 PointsSteven Parker
231,248 PointsThe "wrapper" is the flexbox, which fills the height, and the "content" is the flex item which is vertically centered by the "justify-content" setting. But the centering should still work even if the "content" div is removed. Then the other elements would become the flex items.