How to center a div in Webflow?

Centering a div is one of the most common layout tasks in Webflow, and there are several ways to do it depending on your layout context. The right approach depends on whether you're centering horizontally, vertically, or both.

Using Flexbox to center a div

Flexbox is the most reliable method for centering in Webflow. Select the parent element and set its display to Flex. Then configure the alignment options in the Style panel.

Horizontal centering:

• Set the parent to display: flex

• Set justify-content: center

Vertical centering:

• Set the parent to display: flex

• Set align-items: center

Both directions:

• Set the parent to display: flex

• Set justify-content: center and align-items: center

If the parent needs to fill available height for vertical centering, set its height to 100vh or 100% depending on the layout.

Using auto margins

For horizontal centering only, you can use auto margins on the child element:

• Set the child div to a specific max-width

• Set its margin-left and margin-right to auto

In Webflow's Style panel, click the margin value and type auto. This works in any block layout context and is the simplest approach when you only need horizontal centering.

Using Grid

CSS Grid also supports centering through place-items: center on the parent. In Webflow:

• Set the parent to display: grid

• Set justify-items: center and align-items: center

Grid is useful when you're already using a grid layout for other reasons. For simple centering tasks, flexbox is usually the cleaner choice.

Which method to use

• Flexbox — best general-purpose solution, handles both axes

• Auto margins — quickest for horizontal-only centering

• Grid — use when already working within a grid context

Avoid using text-align: center or position: absolute with transforms for layout centering. These create fragile layouts that break in responsive contexts or when content changes.