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.

layout-design
This video features an old UI. Updated version coming soon!
This video features a third-party integration, and the UI may not be up to date. Visit their documentation for up-to-date info!

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

The box model assessment

Get 100% and receive a badge – Login/sign up here

0%

Take test again

Go to related lessons to learn more:
Intro to HTML/CSS

A box that contains other boxes inside is called __ and the boxes inside another box are called __

The box model assessment

Get 100% and receive a badge – Login/sign up here

The box model assessment

Get 100% and receive a badge – Login/sign up here

0%

Take test again

Go to related lessons to learn more:
Intro to HTML/CSS

If you drag an element onto an empty canvas in Webflow, where will it automatically be placed?

The box model assessment

Get 100% and receive a badge – Login/sign up here

0%

Take test again

Go to related lessons to learn more:
Intro to HTML/CSS

Which CSS property affects the the outside of an element?

The box model assessment

Get 100% and receive a badge – Login/sign up here

The box model assessment

Get 100% and receive a badge – Login/sign up here

HTML/CSS assessment

0%

Take test again

Go to related lessons to learn more:
Intro to HTML/CSS

HTML/CSS assessment

HTML/CSS assessment

0%

Take test again

Go to related lessons to learn more:
Intro to HTML/CSS

HTML/CSS assessment

0%

Take test again

Go to related lessons to learn more:
Intro to HTML/CSS

Which HTML element is used to define a paragraph element?

HTML/CSS assessment

0%

Take test again

Go to related lessons to learn more:
Intro to HTML/CSS

What are the different types of HTML elements called?