How do I center an element in Webflow?

Center one element in its parent

Select the parent on the canvas or in the Navigator. In the Style panel, open Layout, then Display, and click Flex. Click the center cell of the align box. You can also choose Center from both the X axis dropdown and the Y axis dropdown.

That places the child in the middle of the parent, horizontally and vertically. Webflow's flexbox centering article says to select the parent. A heading centered inside a section is a flex setting on the section, or on the div that wraps the heading. It is not a flex setting on the heading alone. Flex on the heading would center whatever sits inside the heading.

Example: a hero should place one heading in the middle of the section. Select the section, set Display to Flex, and click the center cell. The heading moves to the middle. If the section is only as tall as the heading, you will not see a vertical change. The parent has to be taller than the child before the middle looks different from the top. Give the section a height, then click the center cell again.

The same steps center a wrapper that contains a heading, a paragraph, and a button. Set flex on the outer parent and center that wrapper. The elements inside it keep their own layout.

Center a stack of elements

Flex can center more than one child. Webflow's example is two cards that should stack and sit in the center, horizontally and vertically. Select the parent. Click Flex. Click the vertical down arrow to set the flex direction to vertical. Then click the center cell of the align box.

Use the vertical direction when the children should stack. If the cards sit side by side after you expected a column, set that direction, then click the center cell again.

Auto margin can also move flex children. For several buttons inside a flex parent, auto margin on the left and right centers those buttons and splits the remaining space. Use the align box when the whole group should sit in the middle. Use auto margin on one child when only that child should take the leftover space.

Center horizontally with auto margin

For horizontal centering only, select the element and use the Center element button in Style panel, Spacing. Webflow says this sets the right and left margin to auto and leaves the display property unchanged. The auto margin fills the available space on both sides, which pulls the element to the horizontal middle.

This does not center the element vertically. Use flex on the parent when you need both directions. Auto margin also needs leftover width. An element that is already as wide as its parent has no space for the margins to fill, so it will not look centered. Narrow the element, or center it as a flex child, if it should sit in the middle with space on both sides.

Inline elements are the other limit. Webflow says elements with inline or inline-block display cannot be centered with the Center element button, because an inline setting has no available horizontal space. A text link or another inline element is in that group. Set Flex on its parent and use the center cell, or change the element so it is no longer inline, then use the button.

The Center element button is the direct control when you want one block in the horizontal middle and you do not want to change how the parent displays its other children. Flex on the parent changes the layout of every direct child. Auto margin changes the element you selected.

Check the class and the breakpoint

The flex setting and the auto margins live on a class. Every element with that class gets them. If you set Flex and the center cell on a class named Section, every section with that class becomes a centered flex parent. When only the hero should do this, use a class that only the hero uses. A combo class on the hero can hold the exception if the base class must stay shared.

Read the Selector before you change Display. If the class name is the shared one, switch to the hero's own class, set Flex there, and click the center cell again.

Desktop styles cascade down to smaller breakpoints. A tablet or phone breakpoint can override display or alignment. If the hero is centered on desktop and stuck to the left on a phone, select the parent on that breakpoint and set the center cell there too.

Extra padding on one side is a weak substitute. It shoves the element over and drifts when the width changes. Flex and auto margin use the space the parent actually has.

Publish and compare the box with the text

Publish the site and reload the page. The heading should sit in the middle of the hero if you centered it with flex and the section is taller than the heading. A block centered with auto margin should show equal space on the left and the right.

If the block is still flush left, the Center element button did not apply because the element is inline, or flex is on the wrong element. Select the parent in the Navigator, set Flex, and click the center cell. Confirm the Selector is the class you meant to change, then publish again.

If only the words look centered, and the colored box is still on the left, you changed text alignment. Text alignment centers the line inside the element. It does not move the element inside its parent. Leave the text alignment if the words should be centered in the box. Add flex or auto margin when the box itself should move.

Check the phone width after you publish. If it is still left aligned, set the center cell on the parent at that breakpoint, publish, and reload.