在调整页面大小后保持模态对话框垂直居中

Question

将 <dialog> 元素与 .showModal() 一起使用时，对话框在页面上水平和垂直居中显示。但是，如果随后调整浏览器 window 的大小，对话框将不再居中。

<dialog>
  <h1>
    Test Dialog
  </h1>
  <p>
    This is a test modal dialog.
  </p>
</dialog>

document.querySelector('dialog').showModal();

设置对话框样式以使其在页面上居中的合适方法是什么？（或者，这样做合适吗？我知道未来的浏览器可能会以完全不同的方式处理 showModal()，尤其是在移动设备上。）

Answer 1

将以下内容添加到 dialog position: absolute; top: 50%; transform: translatey(-50%); 适用于 jsfiddle

Keeping a modal dialog vertically centered after page resize