Vertically centering containers for consistent views across screen sizes

Hello, I’m having a problem vertically aligning the hero container in my pages. I’d like for it to be vertically centered across screen sizes. I tried to do this using Flexbox thinking this would be the best option, but it doesn’t work :frowning: Perhaps I’ve been looking at this too long and am reaching out to help in getting a solution please.

I’m re-using this container in other pages in this project, and created a symbol for this for simple re-use.

Thanks, I greatly appreciate any support. I’m new to WF.

Link: https://preview.webflow.com/preview/homepagevideo?preview=c9c7ab97f94276df988e2562f1794323

Thank you

Hi @D4L

Did you get this fixed? Does the ‘Welcome, username etc’ need to be part of the hero box too?

Stu

Hi StuM,

I haven’t been able to get it fixed. The Welcome/Username Log In box does not need to be part of the hero box. I would like it to be vertically centered across all devices. Thank you.

I may refer to one of the Professors of Flexbox @PixelGeek on this one - Nelson any clues? Or Dr @Waldo if you are around on the forum just now?

I briefly got it working somehow but lost it!

Stu

Select the container and remove top and bottom margin.
Put the container inside the bg video element.
Give the container a fixed height, like 200px.
Give the container position relative top 50%.
http://vincent.polenordstudio.fr/snap/42skd.jpg
Give the container transform y -50% (move up 50%).
http://vincent.polenordstudio.fr/snap/hcxu1.jpg

http://vincent.polenordstudio.fr/snap/8bxjt.jpg

That’s the proper way to vertically center with CSS, without having to use Flex.

This topic was automatically closed 125 days after the last reply. New replies are no longer allowed.