Can't vertically center a div using Flex

The problem occurs when substituting a custom container for the default Webflow container.

This issue will be much clearer if I demonstrate it in a short video rather than attempt to explain it: http://bit.ly/2Z24UiO

If you want to visit my Webflow project, the page in question is located in the “examples” folder and is called “Animation Motion Graphics David Yurman.”

Here is my site Read-Only: https://preview.webflow.com/preview/nymm?utm_source=nymm&preview=3def8ecb6e85abad358ae527eff5aee2&mode=preview

Any advice or insight would be appreciated.

Thanks.

Hey Chuck,

This is definitely a Video element behavior “bug” and not the containers / divs.
I have added the “” to bug because it is not a real bug, but a normal behavior of a video block (which is sometimes different then expected :confused:)

Once you put your video block into a wrapping div inside the ‘centerer’ element, the scroll disappears.

1 Like

@avivtech

Thanks, Aviv, I never would have figured that out.

Odd to me that when I add the wrapping div inside the ‘centerer’ element as suggested the video disappears.

But I made it reappear by setting the Flex Child Basis setting of the wrapping div to 640px (the maximum size that I’d like to video to appear) and the video came back, and also properly resizes down at viewports smaller than 640px.

I have no idea what I’m doing or why this behavior is happening, but all’s well that ends well…

1 Like