dialog默认不居中，必须手动设置position: fixed + top: 50% + left: 50% + transform: translate(-50%, -50%)；仅top/left会使左上角居中导致整体偏右下，transform用于反向补偿自身宽高。
dialog 默认不居中，必须手动重置定位样式。浏览器对 dialog 的原生样式差异极大：Chrome 有轻微阴影和圆角，Firefox 几乎透明无边框，Safari 甚至默认左上角贴边——靠浏览器默认行为完全不可靠。
为什么只写 top: 50%; left: 50% 不行
因为 top 和 left 定位的是元素**左上角**。设为 50% 后，弹窗左上角落在视口中心，整体偏右下。必须用 transform: translate(-50%, -50%) 把自身宽高的一半“拉回来”，才算真正居中。
常见错误写法：
-
dialog { position: absolute; top: 50%; left: 50%; }→ 弹窗右下角超出视口 -
dialog { margin: auto; top: 0; bottom: 0; left: 0; right: 0; }→ 必须显式声明width和height，否则不生效 - 给内部
<p></p>加text-align: center→ 只居中文本，不影响弹窗框位置
dialog 居中必须重置的几个 CSS 属性
原生 dialog 带有浏览器默认 margin、border 和 padding，不重置会导致定位偏移或视觉错乱。
最简可靠写法：
dialog {
position: fixed;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
margin: 0;
border: none;
padding: 1.5em;
border-radius: 8px;
box-shadow: 0 4px 12px rgba(0,0,0,0.15);
}
关键点：
-
position: fixed确保滚动时仍锚定视口中心 -
margin: 0和border: none是必须项，否则 Chrome/Firefox 默认 margin 会干扰top/left -
padding推荐显式设置，避免 Firefox 下内容紧贴边缘 - 移动端需额外加
max-width: 90vw; max-height: 90vh;防止溢出
为什么 :open 伪类不能用，而要用 :modal
:open 是旧草案中的伪类，已在标准中被移除。当前规范只支持 :modal 匹配调用 showModal() 后正在显示的 dialog 实例。
这意味着：
-
dialog[open]或dialog:open在所有现代浏览器中都不生效 -
dialog:modal只匹配showModal()打开的弹窗；show()打开的不匹配，也无法纯 CSS 区分 - 实际开发中应统一用
showModal()，再配合dialog:modal控制打开态样式 - 关闭态隐藏建议用
dialog:not([open])或添加临时 class，而非依赖[open]属性切换
点击遮罩关闭弹窗的兼容写法
::backdrop 默认不可点击，也不冒泡事件。规范没定义“点背景关窗”，所以必须手动监听。
正确监听方式：
dialog.addEventListener('click', e => {
if (e.target === dialog) dialog.close();
});
注意兼容陷阱：
- Safari 15.4–16.3 中
e.target可能始终是body，需 fallback 判断坐标：e.clientX - 绝对不要写
dialog.addEventListener('click', () => dialog.close())，这会让点击内部按钮也关闭 -
show()没有 backdrop，这段监听无效，仅适用于showModal() - 确保
dialog已挂载到document.body，否则事件监听可能失效
真正麻烦的不是居中本身，而是不同浏览器对 dialog 渲染时机、焦点管理、transform 上下文（比如父元素有 will-change）的处理差异。一旦遇到 Safari 不渲染或焦点卡死，优先检查是否用了 showModal()、是否在 DOM 加载后调用、以及是否意外给父容器加了影响层叠上下文的属性。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
