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:
How to center a single element
To vertically and horizontally center one element in the middle of its parent element:
- Select the parent element on the canvas or in the Navigator
- Go to Style panel > Layout > Display
- Click Flex
- 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:
- Select the parent element on the canvas or in the Navigator
- Go to Style panel > Layout > Display
- Click Flex
- Click the vertical “down arrow” icon to set the flex direction to vertical
- Click the center cell of the align box (you can also choose Center from both the X and Y axis dropdowns)