Floating Group Vertical Center

Hi Team,

I’m having a hard time getting a single page application I’ve been working on to center vertically in the browser window. The app is a survey that has each question in a floating group that appears based on what state “survey: step” is in.

I’ve gotten the survey to be responsive in the horizontal, but I am struggling with the vertical.

I would like to center the floating group each question is in, in the middle of the browser window. I tried to use a floating group tied to the top and bottom, but it still tries to response for an absolute pixel count based on the top margin:

Above: You can see the floating group positioned in the middle of the page.

The result is that the group stays a fixed pixel count off the top:

I tried the Javascript solution in this thread, using this code:

*$(document).ready(function(){
*$(“.main-page”).css(“height”,“100vh”);
*$(“#vertically-extended”).css(“height”,“100vh”);
*$(“#vertically-centered”).css(“top”,“50vh”);
*$(“#vertically-centered”).css(“transform”,“translateY(-50%)”);
*});

While this works momentarily, as soon as an animation runs the vertical position is lost.

What am I missing? How do I center content on the page vertically regardless of viewport height?

Thanks,

Chris

Did you find anything on this? Struggling with this too

@AliFarahat made that easy with his free plugin Toolit Kit and its Hero Sizing Element.

2 Likes