Skip To Content

01 - Post Title

Vertical Centering With Scrollbars Using Flexbox

02 - Post Content

Flexbox makes centering content super easy by simply applying align-items: center and justify-content: center to the flex container.

Problem

Problem arises with this method when the flex item is larger than the flex container.

As you can see above, you’re able to scroll to the bottom of the flex item but you can’t scroll up to the top.

Solution

Instead use margin: auto; on the flex item.

The flex item will now be centered when it doesn’t overflow the container

and you’ll be able to scroll to the top and bottom if it does.