Dialog default positioning (centered in viewport)

This is a mock of dialog's default positioning.

A dialog can be styled and positioned using ordinary CSS. But its default position is unusual: by default, a dialog is vertically centered in the viewport when opened. It is still position: absolute, so it can be scrolled away.

Here is a snippet to use default positioning.

HTML:

<dialog id="dialog">This is a dialog.</dialog>

JS:

document.getElementById('dialog').show();

Note that the dialog can be anywhere in the DOM tree and is still vertically centered. E.g., for

<div style="position: absolute; top: 100px; left: 100px">
  <div style="position: absolute: top: 10000px; left: 10000px">
    [...]
      <dialog id="dialog">This is a dialog.</dialog>
  </div>
</div>
at dialog.show(), the dialog is vertically positioned in the center of the viewport.

Click the button in the lower left to open a dialog.

Filler text follows to let you scroll.