Reply To: Modal Dialog won't centre on screen?

[Merri]

The issue happens because position: fixed; doesn’t work it’s usual way on your page: #skel-panels-pageWrapper has a CSS backface-visibility: hidden; and this has a side-effect that makes 100% for fixed elements to not be the usual size of visible viewport, but instead be the size of the element that has backface-visibility set. Which means your #overlay element inside #skel-panels-pageWrapper is over 4000px tall!

Easiest solution is to use height: 100vh; and then the fixed element will be 100% viewport height. So your CSS should read:

/* for browsers that don't support viewport units (they also won't support CSS 3D transforms AFAIK) */
height: 100%;
/* for browsers that do support viewport units */
height: 100vh;

And after that it is easy enough to make anything go to the middle of the overlay element.

In summary I’d say this is an interesting side effect that 3D transforms have.

Edit!

Ah, I forgot that the element also appears at the top of the transformed element. So you’d have to adjust the top position of the element as well, and that isn’t that nice as you’d have to do it in JavaScript. It would be best if you avoided setting backface-visibily.