With the layout superpowers of flexbox, you can align and justify your HTML elements perfectly within the center of its parent element.
Centering elements vertically has always been a challenge in web design, until flexbox arrived on the scene. With flexbox it’s easy to center elements vertically in their parent element.
In this lesson:
In all of these examples, the parent element has been set to a height of 100vh, which is 100% of the viewport height.
To center one element in the middle of a section both vertically and horizontally:
The process is the same for when you want to center a single element that contains multiple elements. For example, if you want to vertically center a container that holds a lot of content. Set the parent element to flex, then justify and center.
You can center multiple elements as well. For example, if you have 2 cards and they all need to be stacked and centered horizontally and then centered vertically, you can use flexbox: