Use CSS layout to center dialog

[Adam Peller]

ttrenka suggested a clever CSS tip to center the dialog.

<div id=centerpoint>
    <div id=dialog>
         ...
    </div>
</div>

where

#centerpoint {
   top: 50%;
   left: 50%;
   position: absolute;
   /* maybe a rule about overflow: visible? */
}

#dialog {
    position: relative;

    width: 600px;
    margin-left: -300px;

    height: 400px;
    margin-top: -200px;
}

Some JS may still be necessary to determine the size and measure the viewport so it fits on screen, but the actual layout could be CSS driven for smoother resizing.

[dante]

the dialog is draggable, and not always centered. dialog also can retain relative position in the viewport when window is scrolled and so on. I would prefer to see position:fixed used, as we're going to have to do positioning math regardless.

[bill]

Yah, I tend to agree. The position:fixed thing is already filed as #8679.