Center panel based on screen size

Community Usage questions
1

Hello again,

Is it possible to center a panel based on the screen size?

Thanks in advance,

Michael

2

There are multiple ways to do that:

  1. Use percents to define the panel’s size and position

or

  1. if the panel is the only child of its parent, set its left/top properties to auto and add the following css to its parent:
> .panel {
  display: flex;
  align-items: center;
  justify-content: center;
}

or

  1. set the panel’s left/top properties to auto, define its width/height and add the following css:
top:calc(50% - 50rem); /* 50rem = width/2 */
left:calc(50% - 50rem);

Reference: https://openstagecontrol.ammd.net/docs/css-tips/#responsive-sizing

1 Like
3

thanks! the second one did the trick.