Streaming live at 10am (PST)

How to Center Flexbox Container


#1

I know how to center the children/flexbox items inside the container, but I want to be able to center the container itself in the middle (vertically and horizontally) on the webpage.

Some people have said make the body a Flexbox container, but that hasn’t worked for me. I also tried making a Flexbox container 100vh, but for whatever reason, it ends up having space outside the top and bottom of the container, forcing there to be a scrollbar to the right.

Sorry, if this is a dumb question.


Here is my site Read-Only: LINK
(how to share your site Read-Only link)


#2

Hi Jake,

Welcome to the Webflow forum. The only dumb question is the one we don’t ask! :thinking:

When creating the 100vh Flexbox container, did you check for any padding/margin that might have been applied to either the body or the parent container?

I created a very simple example with a div centred correctly:
https://preview.webflow.com/preview/centred-div-49730e?utm_source=centred-div-49730e&preview=8d61bd649f6bbceef5c1d671b68764a6


#3

Make sure you give your container some width, and you can click the little “centering” icon on the lower right hand side of the padding/margin area of the designer. It sets left and right margin to “auto” and centers it horizontally.

What is the height of your flex container?

To Center vertically, You can set top margin/padding of your flex container to 50VH,
-then -
add a “Transform”: Move on Y axis [1/2 of [height in pixels of your flex container] or any other fixed unit.

Both of these will perfectly center your container horizontally and vertically on any size screen.

Does this help?