Center a container vertically on the screen

Well that, I’m trying to center a container vertically but I don’t know which formula to use. In the variable position of the container I used:
Theme variable (Card) - $cardPaddingVertical
Theme variable (Input) - $inputLabelMarginVertical and $inputPaddingVertical
Theme variable (Layout) - $PaddingPageVertical
But none of these works. Can you help me?

1 Like

Hi, you can use systemVars to determine the height of the viewport, and calculate the right position for the component based on that (docs). Also choose “Stretch to the viewport height” in the page advanced style properties. :slight_smile:

Hi Mari, how can I determine the height of the graphics window and calculate the correct position? I’m sorry but my English is very bad and I have a hard time understanding the docs and videos! :sweat:

Hi, actually no calculations are needed, here’s a step-by-step :slight_smile:

Page stretched to viewport height:

Parent container set to viewport height:


Content justified to middle:


Now if I put a Card inside this container, it will be centered vertically:


Perfect!!! Now yes!! Thank you very much Mari!!! :hugs:

1 Like

Thank you so much mari.

1 Like

I am not sure if the viewport.height variable will be changed when the user changes the browser size on the desktop but feels like you could just set height: 100% to the container to fill the page height.