Flexbox makes centering content super easy by simply applying
align-items: center and
justify-content: center to the flex container.
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.
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.