How to align items vertically in Webflow?

Vertically centering content is one of the most frequently asked layout questions in Webflow. The approach depends on the layout method you're using — Flexbox, Grid, or standard block layout — but Flexbox is by far the most common and straightforward solution.

Using Flexbox for vertical alignment

Select the parent container that holds the items you want to align vertically. In the Style panel, set Display to Flex. Then configure two settings:

1. Flex Direction: Row (horizontal layout, default) or Column (vertical layout)
2. Align Items: Center

Align Items: Center vertically centers flex children within the parent. This works regardless of whether the flex direction is row or column — it always centers items along the cross axis.

If you need items to be vertically centered and horizontally centered, also set Justify Content to Center.

Flexbox alignment options

• Align Items: Center — vertically centers children

• Align Items: Flex Start — aligns children to the top

• Align Items: Flex End — aligns children to the bottom

• Align Items: Stretch — stretches children to fill the container height (default)

• Align Items: Baseline — aligns children along their text baseline

Using Grid for vertical alignment

If the parent uses CSS Grid (Display: Grid), vertical alignment works through the Align Items property in the Grid section. Set it to Center to vertically center grid children. The same Start, End, and Stretch options apply.

Vertical alignment without Flexbox or Grid

For single elements that need to be vertically centered in a non-flex container, you can use:

Position: Relative on the child + Transform: Translate Y — Set the child to position: relative, then use a transform with translate Y: -50% combined with top: 50%. This is a reliable centering technique but requires manual adjustment.

Padding — Sometimes the simplest approach is adding equal top and bottom padding to the parent to visually center content. Not precise for dynamic content, but works for fixed-height sections.

The parent needs height

Vertical alignment only works if the parent container has a defined height. If the parent's height is determined by its content, there's no extra space to center within — the items will appear at the top regardless of alignment settings. Set a min-height or fixed height on the parent for vertical alignment to have visible effect.

Quick steps

1. Set the parent's Display to Flex
2. Set Align Items to Center
3. Ensure the parent has a defined height
4. Adjust Justify Content if horizontal alignment is also needed

Flexbox with Align Items: Center handles vertical alignment in the vast majority of Webflow layouts.