Poco soporte de momento 1. By default, a dialog is centered vertically in the viewport when opened. It is still absolutely positioned so it can be scrolled away. The viewport centering occurs regardless of the dialog’s position in the DOM tree. 2. Dialogs can be modal. When a modal dialog is opened, it blocks the rest of the document. There is a…

dialog.css

.modal{
  /* arbitrary styling */
  background-color: white;
  border-radius: 5px;
  box-shadow: 2px 2px 2px rgba(0,0,0,0.2);
  height:200px;
  width:300px;
 
  /* change position to fixed if you want to prevent the dialog from scrolling away, and center it */
  position:fixed;
  top:50%;
  left:50%;
  margin-left: -150px;
  margin-top:-100px;
}

.modal::backdrop {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: rgba(0,0,0,0.5);
}

dialog.html

<dialog class="modal">This is the dialog!</dialog>