How to center pop-up vertically

[sudsy]

@onerbarisoner

.Popup {
	top: 50% !important;
	transform: translateY(-50%);
}

Keep in mind, though, that the above will be problematic if the popup’s height exceeds the height of the viewport, which is not uncommon for forms and such - especially on mobile devices. Of course, that problem can be worked around by setting a max or fixed height for the popup and then scrolling its content.

A couple non-CSS options include:

• Make the popup itself transparent, set its layout to Align to parent and don’t constrain its width or height (i.e. leave it at “Inf”) so that it fills the viewport. Then add a regular group to the center nonant, constrain its width/height, and style it like a popup. If you want the popup to close on “outside” click, implement a workflow for the “transparent” popup to close it on click.

• Create a “fake” popup using a floating group that fills the viewport and functions as the semi-transparent “overlay” and then add a group to serve as the popup. Style similar to above.

Anyway, just a couple options and things to consider.