Center elements with flexbox

With the layout superpowers of flexbox, you can align and justify your HTML elements perfectly within the center of its parent element.

This video features an old UI. Updated version coming soon!

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