How can I vertically center a container inside a section in Webflow? Thanks.
TL;DR
- Set the section to Display: Flex with Direction set to Column and Justify set to Center.
- Ensure the section has a defined height (e.g., 100vh) for vertical centering to take effect.
To vertically center a container inside a section in Webflow, you can use Flexbox settings on the parent element. Here's how to do it:
1. Select the Section Element
- Click on the Section that contains the container.
- Ensure it's the direct parent of the container you want to center.
2. Apply Flexbox to the Section
- In the Style panel, scroll to the Layout section.
- Click Display: Flex.
- Set Direction to Vertical (Column) or Horizontal (Row)—both work, but Column is more typical for vertical centering.
- Set Justify: Center to align items vertically.
- Set Align: Center if you also want to center the container horizontally.
3. Adjust Section Height
- Make sure the Section has a defined height, such as:
- Height: 100vh (to fill the viewport), or
- A custom height that allows centering.
- Without height, vertical centering won't be visually effective.
4. Verify Container Position
- Ensure the container is not using position absolute or overridden margins that take it out of the flex context.
Summary
To vertically center a container in a section, set the section to Display: Flex, choose Justify: Center, and ensure the section has a defined height (e.g., 100vh). This will center your container both vertically and (optionally) horizontally.