Website does not center vertically

1

Hey, just building a tribute page but my problem is that the website does not center vertically when using flexbox. Can someone pls explain?

Here is the code:

https://codepen.io/3rfaan/pen/VWaomj

2

You need to set the height of html, body and the flex container to 100%. Also replace align-content with align-items.

3

This worked, thank you!

Just out of curiosity: Why do we need to set the height of the mentioned selectors but the width we can leave unspecified and yet it centers?

4

I think the horizontal centering is due to bootstrap’s .container class. Try removing all the 100% heights and the flex stuff and just add a red background to .container.

Meanwhile, setting those elements’ heights to 100% and adding the flex stuff do center the content vertically.

5

You are right again.

Now to test that I simply deactivated Bootstrap. Now the content aligns horizontally but not vertically. I set the width of html and body elements to 100% and the content width to 70%.

Saved it to CodePen above.

6

The width: 100%; adds a horizontal scrollbar. It’s not really necessary. You also have a typo in justify-content.

You have two options:

  • Make the body the flex container. Then remove .container's height.
  • Retain the flex stuff in .container, then move the width: 70% to its direct child element (the .content element).
7

Worked perfectly. Thanks alot mate! :smiley: