Centering items vertically and horizontally on a page can be challenging when working with pure CSS. However, Flexbox can help streamline this process.
Let's imagine that we want to align an image so it's aligned right in the middle of a div, the HTML code may look something like this:
By itself, this would look something like this on the page:
In order to center this, we can combine the Flexbox tools of justify content and align-items to center the element horizontally and vertically. I gave the container a background color and made it the full height of the page so you can easily see the size of the div itself.
This will result in the page looking like this:
So how exactly does this work? It comes down to the align-items and justify processes. By default, Flexbox uses the 'row' direction. So if you remove 'align-items' you'll see that the image centers horiztonally. And by adding the 'align-items: center;' rule, the element will be centered vertically.
