Center elements vertically with flexbox.
Centering elements vertically has always been a challenge in web design, until flexbox arrived on the scene. With flexbox it’s easy to center any element(s) vertically in their parent element. Here are three common use cases for centering with flexbox:
In all of these examples, the parent element has been set to a height of 100vh, which is 100% of the viewport height..
In this first example, we want to center one element in the middle of a section both vertically and horizontally. Here are the steps:
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 three cards and they all need to be stacked and centered horizontally and then centered vertically, you can use flexbox:
Something went wrong while submitting the form. Please contact firstname.lastname@example.org