dialog必须用showModal()激活才能触发原生居中逻辑，仅设open属性无效；其居中需强制设置position: fixed + top: 50% + left: 50% + transform: translate(-50%, -50%)，且必须为body直系子元素。
dialog 默认不居中，加 open 属性只是让它可见，但不会触发模态行为，也不会自动居中——必须用 showModal() 启动，再配合 CSS 定位。
dialog 必须用 showModal() 才能真正激活居中逻辑
只写 <dialog open></dialog>，浏览器会把它当普通块级元素渲染，位置在 <body> 顶部，getBoundingClientRect() 返回的 top 常为 0。这不是 bug，是规范行为。
-
showModal()是唯一能触发原生模态逻辑（含::backdrop、焦点锁定、Esc 关闭）的方法 -
show()不加遮罩，也不锁 Tab 键，且不保证居中，基本不用 - 脚本执行早于 DOM 加载会报
Cannot read property 'showModal' of null，把 JS 放在</body>前，或包在DOMContentLoaded里 - 别手动设
dialog.open = true或dialog.style.display = 'block'，这绕过原生焦点管理，Tab 键直接失效
dialog 居中必须用 position: fixed + transform
dialog 没有内置居中样式，Chrome/Firefox/Safari 渲染差异大：Chrome 默认带阴影和圆角，Firefox 是透明块，Safari 甚至默认不居中。靠浏览器默认值不可靠。
- 强制重置定位：
dialog { position: fixed; top: 50%; left: 50%; transform: translate(-50%, -50%); } - 不能用
position: absolute，否则滚动时弹窗偏移；fixed锚定视口才稳定 -
transform: translate(-50%, -50%)是关键，它基于自身宽高计算，不依赖内容尺寸，动态加载后仍保持居中 - 避免父容器干扰：
dialog必须是<body>的直系子元素，嵌套在<div>、<form>或任何设了transform/overflow的容器里，居中和::backdrop都会失效
点击遮罩关闭 dialog 要自己监听，且注意 Safari 兼容性
dialog::backdrop 默认不可点击，也不冒泡事件——规范里就没定义“点背景关窗”，所以不能指望点击遮罩自动关闭。
立即学习“前端免费学习笔记（深入）”；
- 正确监听方式：
dialog.addEventListener('click', e => { if (e.target === dialog) dialog.close(); }); - Safari 15.4–16.3 存在兼容问题：点击遮罩时
e.target可能始终是body，需 fallback 判断坐标，例如if (e.clientX < dialog.getBoundingClientRect().left || e.clientY < dialog.getBoundingClientRect().top) - 千万别写成
dialog.addEventListener('click', () => dialog.close())，这会让点击弹窗内部按钮也触发关闭 - 这段监听只对
showModal()生效，show()没有::backdrop，监听无效
表单提交导致页面刷新？用 method="dialog" 最简解
在 dialog 里放 <form> 很常见，但默认提交会整页 reload，看起来像“弹窗闪退”。
- 最简方案：给
<form>加method="dialog"属性，提交后自动触发dialog.close()并设置dialog.returnValue，不刷新页面 - 需要异步提交（如
fetch）时，必须在submit事件中调用e.preventDefault()，再手动dialog.close() - 别把关闭逻辑写在按钮的
onclick里——用户按回车提交会漏掉 -
enctype默认是application/x-www-form-urlencoded；传 JSON 时要显式设为application/json
真正麻烦的不是怎么写 CSS，而是 dialog 对 DOM 结构、JS 调用时机、事件委托路径都极其敏感——一个 transform 父容器、一次提前执行的脚本、一行错位的监听，都足以让居中失效或交互中断。
