How do I vertically center this div using Flex Boxes?

HTML-CSS
1

I’m trying to vertically center either the wrapper or row divs

1 Like
2

You can try adding this to the container:

.container {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100%; /* Needed to give the wrapper element room to move around vertically */
}

The outer edges will overflow when the viewport’s too narrow vertically though. I don’t know how to deal with that using flex (probably fixable with media queries), but it can also be fixed with CSS grid

3

Adding to what @kevcomedia said, in smaller screens, changing display: flex into display: block in the.container class would make the overflow normal. Since you have added bootstrap, they have default breakpoints and the .container class has a default width based on the breakpoints. So it may cause some problems, so on some breakpoints you might need to add margin on top and bottom of .container

Follow those breakpoints or else it may affect the width of container.

4

You are using a bootstrap theme, so you should use the bootstrap classes if you can. Never really got the right combination of classes working, so I tried using the card component.

Attempt one (it’s an anonymous pen, copy/fork it to see it in full view). You can’t really trust the height overflow on codepen unless you set the view to have the code on the side.