How can I vertically center a child container in a section that fills the remaining viewport after the navbar, which reduces the section height?

To vertically center a child container inside a section that fills the remaining viewport after deducting the navbar height, follow these steps:

1. Set the Section Height

• Select the Section and go to the Style panel.
• Set its Height to 100vh (full viewport height).
• To account for the navbar, use CSS Calc by setting Height to calc(100vh - [navbar height]px).

2. Use Flexbox for Vertical Centering

• Ensure the section is selected, then Set Display to Flex.
• Under Flex Layout, choose Vertical (Column).
• Set Align to Center and Justify to Center.

3. Ensure the Child Container Adjusts Correctly

• Check that the child container does not have unnecessary margins or positioning that affect centering.
• If necessary, set its Width to Auto or a specific percentage.

4. Adjust for Different Navbar Heights (Optional)

• If using a fixed navbar, ensure the section sits below it by adding padding-top: [navbar height]px instead of reducing the section’s height.
• For a sticky or absolute navbar, manually adjust the height calculation.

Summary

Set the section height to calc(100vh - navbar height), apply Flexbox for vertical alignment, and check container settings to ensure proper centering.