How can I center a section in the middle of the screen when a user clicks on a in page link in Webflow?
- Assign a unique ID to the target section and link to it using an in-page anchor.
- Add custom CSS with scroll-margin-top (e.g., 40vh) to center the section in the viewport on click.
To center a section in the middle of the screen on in-page link click in Webflow, you need to offset the browser’s default scroll behavior. By default, browsers align the target element to the top of the viewport.
1. Assign Unique ID to Target Section
- Select the section you want to scroll to.
- In the Element Settings Panel (D), set a unique ID (e.g.,
#contact).
2. Create the In-Page Link
- Select the link or button.
- In the Link Settings, choose "Section" and pick the ID you just created (e.g.,
#contact).
3. Use Scroll Margin to Center Target Section
Webflow does not offer native scroll centering, but you can simulate it using scroll-margin-top with custom CSS:
Add a custom embed component (from the Add Panel), or go to Page Settings > Custom Code > Inside Head tag, and paste:
``
This offsets the section so it scrolls into the center of the viewport (40vh = 40% of viewport height from the top; adjust as needed).
4. Alternative: Add Top Padding to Section
- If you prefer not to use custom code, apply top padding to the target section (e.g.,
40vh) and set it to displayflexwithjustify: centerandalign: centerto center content. But this method affects layout permanently, not just on scroll.
5. Optional: Use Smooth Scroll Behavior
- Webflow supports smooth scrolling by default for in-page links.
- If needed, confirm it's active under Page Settings > Advanced Settings > Smooth Scroll is enabled.
Summary
To center a section in the viewport on in-page navigation in Webflow, assign it an ID and apply a scroll-margin-top using custom code. This ensures the section scrolls into a centered position without layout changes.