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 any element(s) vertically in their parent element. Here are three common use cases for centering with flexbox:

1. Centering single elements
2. Centering 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.

Centering a single element

In this first example, we want to center one element in the middle of a section both vertically and horizontally. Here are the steps:

1. Add an element you wish to the section
2. Select the section
3. In the Style Panel set the display setting to flex
4. Under flex layout, set it 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.

Centering multiple elements

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:

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