Media Library Dialog Opens Off-Center

I have a custom module which opens a dialog which among other things contains an image.
The dialog is always opened off center like in the screenshot of this issue.
But when any scroll happens, then it gets perfectly centered.
It took me a long time to figure out the cause and a solution. I have looked at this issue, at Gin theme issue #3332854 🐛 Dialog not always positioned correctly Fixed , at Gin theme issue #3219407 → and other dialog related issues I can find but I've never found a solution there.

Then I figured out the cause and a solution for my problem myself, so I figured I'd share it here for anyone having the same problem with off-center dialogs. It might just help you on your way to a solution too.

As said, in my case, the dialog content has an image. Without the image the dialog is actually not off center. So what happens is that the dialog loads, has a certain width without the image, it is centered based on that with, but then after that the image finishes loading and makes the dialog larger towards the right side and bottom. So thats why its off-center: because of rendering image after positioning the dialog.
Now that I found the cause, the easiest fix is to trigger a scroll event after the image finished loading.
In my case I did this:
window.scrollBy(0,1);
This scrolls the window down vertically by 1 pixel. This then automatically triggers the repositioning of the dialog.
In my case my image in the dialog was rendered by using cropperjs which fortunatly has a ready() event. So luckily all I had to do was:

    //Initialize cropper
    cropper = new Cropper(
      image, {
        ...
        ready(){
          // Scroll the window 1 px to trigger repositioning and centering the dialog box.
          window.scrollBy(0,1);
        }
    }
    );

So since this issue here is aimed at the media library more specifically, you should find a way to trigger window scroll after all media library preview images in the dialog have been loaded.