skip to content
HeyBrazadownload →

Webflow logowebflow · HeyBraza shows you

how to center a div in webflow

HeyBraza points at the parent element you actually need to select and the exact flex align buttons, so you stop styling the wrong box.

centering a div in webflow feels harder than it should because you have to style the parent, not the thing you want centered. once you know that, it's two clicks with flexbox. here's how to center horizontally, vertically, or both.

or do it yourself

  1. 1select the parent div (the container holding the element), not the element itself.
  2. 2in the style panel under layout, set display to 'flex'.
  3. 3set the flex direction, then click the center alignment for the main axis (horizontal) and the cross axis (vertical).
  4. 4the child now sits dead-center - if you only want horizontal centering of a block, instead give the child left/right margin 'auto'.
  5. 5check the smaller breakpoints, since flex alignment can be overridden per breakpoint.

let HeyBraza do this with you

HeyBraza is a tiny on-screen guide that points at the right buttons and talks you through it, on windows and mac.

download

common questions

why won't my div center in webflow even with margin auto?

margin auto only centers horizontally and only on a block-level element with a set width - for true vertical + horizontal centering, set the parent to flex and center both axes.

do i style the div or its parent to center it?

the parent - centering is controlled by the container's display and align settings, not the child.

more fixes