Align elements using flexbox

Prior to beginning: Take a look at our flexbox introduction.

In this tutorial, you will discover:

1. Techniques for centering individual elements
2. Approaches for centering multiple elements

How to centrally position an individual element

To center one element both vertically and horizontally within its parent container:

1. Identify the parent container on the canvas or in the Navigator
2. Navigate to Style panel > Layout > Display
3. Press on Flex
4. Select the centercell in the alignment box (you can also opt for Center from both the X and Yaxis dropdowns)

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

How to centrally position multiple elements

You can utilize flexbox to centrally position multiple elements within their container. This can be advantageous, for instance, if you have two card elements that need to be arranged and centered both horizontally and vertically:

1. Identify the parent container on the canvas or in the Navigator
2. Navigate to Style panel > Layout > Display
3. Press on Flex
4. Click the vertical “down arrow” icon to adjust the flex direction to vertical
5. Select the centercell in the alignment box (you can also opt for Center from both the X and Yaxis dropdowns)

Discover more about flexbox.