必须显式设置 margin: 0 才能实现 dialog 真正居中，因其默认 margin: 1.5em 会破坏 transform 居中逻辑；还需重置 border 和 padding，并优先使用 inset 或 margin: auto 作为更稳定的替代方案。
dialog 默认 margin 会破坏居中计算
原生 <dialog> 在 Chrome/Firefox 中自带 margin: 1.5em（不是 0），这会导致 top: 50%; left: 50%; transform: translate(-50%, -50%) 的居中逻辑失效——因为 transform 移动的是元素自身宽高的一半，但外边距仍存在，最终视觉中心偏上偏左。
必须显式重置：margin: 0 是硬性前提，否则任何居中方案都只是“锚点居中”，不是“内容居中”。
-
margin: 0必须写在dialog元素本身上，不能只靠父容器 flex 或其他布局兜底 - 不要依赖浏览器默认样式表的“看起来差不多”，不同 UA 可能有差异（比如 Safari 旧版对
<dialog>支持不全） - 如果用了
:modal伪类做状态区分，margin: 0也要写在该选择器内，否则未 open 状态下样式残留会影响 DOM 占位
为什么只设 margin: 0 还不够？
重置 margin 后，还需处理 border 和 padding。浏览器对 <dialog> 的默认 border: solid 1px 和 padding: 1.5em 会继续干扰尺寸计算，尤其当内容高度动态变化时，transform: translate(-50%, -50%) 的偏移量可能不准。
稳妥做法是统一清空并手动控制：
立即学习“前端免费学习笔记（深入）”；
- 加
border: none，避免边框增加额外尺寸 - 用
padding: 1.5em替代默认值（可调），确保内边距可控且一致 - 若需圆角或阴影，用
border-radius和box-shadow单独加，不依赖 border
:modal 伪类不能替代 [open] 的样式控制
:modal 只匹配通过 showModal() 打开的 dialog，而 show() 打开的实例不匹配它——这意味着你无法用纯 CSS 区分“已 open 但非 modal”的状态。如果你项目里混用了两种打开方式，仅靠 :modal 写样式会漏掉一半场景。
更实际的做法是：不管用哪种 API，都手动加一个 class（比如 is-open）或依赖 [open] 属性：
-
dialog[open] { margin: 0; border: none; padding: 1.5em; }—— 覆盖所有 open 状态 - 避免写
dialog:not([open])来隐藏，因为未 open 时 dialog 本就不渲染，没必要干预 - 不要尝试用
:open，它已被标准移除，现代浏览器都不支持
移动端缩放下 transform 居中依然抖动？
即使 margin/border/padding 都清干净了，在 iOS Safari 或 Windows 缩放为 125% 时，transform: translate(-50%, -50%) 仍可能轻微跳动。这是因为 50% 基于视口尺寸计算，而缩放会改变视口物理像素与 CSS 像素的映射关系。
此时建议改用 inset（现代方案）或降级 fallback：
- Chrome 119+ / Safari 16.4+ 支持
inset: 50% 0 0; transform: translate(-50%, -50%)，比top/left更稳定 - 兼容老浏览器：用
top: 0; bottom: 0; left: 0; right: 0; margin: auto;，但需确保 dialog 有明确width和height（比如width: min(90vw, 600px)） - 绝对不要在
dialog上设height: 100vh，它会和滚动条冲突，导致内容被截断
