How can I vertically center a container inside a section in Webflow? Thanks.
TL;DR
- Set the section’s display to Flex, choose vertical direction, align to center, and define the section’s height (e.g. 100vh).
- Alternatively, use Grid display and set both align and justify to center for full centering.
To vertically center a container inside a section in Webflow, you need to use Flexbox settings on the section. Here’s how to do it:
1. Set the Section to Flexbox
- Select the Section that contains your Container.
- In the Style panel, scroll to the Layout section.
- Set Display to Flex.
- Set Flex Direction to Vertical (Column).
- Set Align (Vertical) to Center.
- Set Justify (Horizontal) as needed (left, center, or right).
2. Ensure the Section Has Defined Height
- Still on the Section element, set a Height value.
- Use 100vh if you want the section to take the full height of the viewport.
- Alternatively, use a specific pixel or percentage height.
3. Check the Container’s Height and Margin
- Ensure the Container does not have top or bottom margin that offsets the alignment.
- Also make sure the Container's height is not stretching past the bounds of the section.
4. Optional: Use Grid Instead of Flex
- You can also vertically center by setting the Section's display to Grid.
- Then set Align and Justify both to Center.
- This centers the container both vertically and horizontally.
Summary
To vertically center a container inside a section, set the section’s display to Flex, choose vertical direction, and set align to center with a defined section height (e.g. 100vh). This ensures the container is centered in the middle of the section.