Center elements with flexbox

Use flexbox to align your elements perfectly in the center of their parent element.

We’re transitioning to a new UI, and are in the process of updating our Webflow University content.
Before you get started: Check out our intro to flexbox.

In this lesson, you’ll learn:

  1. How to center single elements
  2. How to center multiple elements

How to center a single element

To vertically and horizontally center one element in the middle of its parent element:

  1. Select the parent element on the canvas or in the Navigator
  2. Go to Style panel > Layout > Display
  3. Click Flex
  4. Click the center cell of the align box (you can also choose Center from both the X and Y axis dropdowns)

You can also follow the steps above to center a single element that contains multiple child elements within its parent element — for example, to center a container with a heading, paragraph, and link block inside.

How to center multiple elements

You can use flexbox to center multiple elements within their parent element as well. This is helpful, for instance, if you have two card elements that need to be stacked and centered horizontally and vertically:

  1. Select the parent element on the canvas or in the Navigator
  2. Go to Style panel > Layout > Display
  3. Click Flex
  4. Click the vertical “down arrow” icon to set the flex direction to vertical
  5. Click the center cell of the align box (you can also choose Center from both the X and Y axis dropdowns)

Learn more about flexbox.

Table of contents

Continue learning

Hmm…we couldn’t find any results for “search query”. Try a different search term or check out our community forum.

Search the forumReset the filter
Load more

Filter

Reset
Thank you! Your submission has been received!
Oops! Something went wrong while submitting the form.
Topics
Thank you! Your submission has been received!
Oops! Something went wrong while submitting the form.
Back to top