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.


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



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>
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.