Center elements 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 elements vertically in their parent element.

In this lesson:

1. Center single elements
2. Center multiple elements

In all of these examples, the parent element has been set to a height of 100vh, which is 100% of the viewport height.

Learn how to use all the flexbox properties.

Center a single element

To center one element in the middle of a section both vertically and horizontally:

1. Add an element you wish to the section
2. Select the section
3. Set the display setting to flex in the Style panel
4. Set the flex layout to justify: center and align: center

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.

Center multiple elements

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:

1. Add all the elements to a section element  
2. Select the section element
3. In the Style panel set the display setting to flex
4. Set it to Vertical Direction
5. Set justify: center and align: center