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