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

【问题标题】：Keeping a modal dialog vertically centered after page resize在页面调整大小后保持模式对话框垂直居中
【发布时间】：2020-08-27 15:20:27
【问题描述】：

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

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

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

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

【问题讨论】：

我认为您正在与 JSFiddle 自己的窗口样式发生冲突。您可以尝试将显示设置（右上角）更改为“正确的结果”吗？调整结果面板的大小，看看它的行为是否符合您的预期。
@chicgeek 我澄清了问题并添加了屏幕截图。我的应用程序、JSFiddle 或任何地方都有这个问题。关键是，垂直居中。抱歉，我本来应该澄清的。
将以下内容添加到 dialog position: absolute; top: 50%; transform: translatey(-50%); 在 jsfiddle 中工作

【解决方案1】：

将以下内容添加到 dialog position: absolute; top: 50%; transform: translatey(-50%); 在 jsfiddle 中工作

【讨论】：