dialog居中必须用position: fixed配合transform: translate(-50%, -50%)，因原生dialog默认不渲染且不占布局；backdrop需显式设background-color；safari中须确保dialog为body直接子元素，避免祖先含transform等属性。
dialog居中必须用fixed+translate，不能只靠margin或flex
原生dialog默认不渲染、不占布局，浏览器也不会自动居中——写<dialog></dialog>后直接调用showModal()，它只会贴左上角显示（尤其在Safari里）。必须手动重置定位才能真正居中。
关键不是“怎么让它看起来居中”，而是“怎么让浏览器把它当顶层浮层正确渲染”。position: fixed是唯一可靠起点，配合transform: translate(-50%, -50%)才是完整解法：
-
top: 50%; left: 50%把元素左上角锚点移到视口中心 -
transform: translate(-50%, -50%)再向左、上各挪自身宽高一半——这是整体居中的核心，缺一不可 - 不能只写
margin: auto或用display: flex父容器居中：dialog脱离文档流，这些对它无效 - 别给
dialog加position: absolute：它会破坏backdrop定位，且在有transform祖先时直接不渲染
dialog::backdrop的背景色必须显式声明
dialog::backdrop在Chrome和Safari里默认透明，Firefox虽有灰底但颜色不可控。不设背景色，遮罩就等于没开——用户点不到、Tab键照常穿透、视觉上也无模态感。
最简可靠的写法是：
dialog::backdrop {
background-color: rgba(0, 0, 0, 0.5);
}
- 别依赖
background: #0005这种简写：部分旧版Safari不支持 - 不要设
z-index：backdrop层级由浏览器固定，手动改可能被忽略或引发冲突 - 如果需要过渡动画（如淡入），只能加在
dialog::backdrop上，dialog本身加transition无效
偏移微调必须用transform，避免top/left触发布局重排
当你需要动态调整dialog位置（比如避开顶部导航栏、适配不同屏幕高度），用top/left会强制触发重排，尤其在动画或频繁操作时卡顿明显；而transform: translateY()只影响渲染层，更轻量。
- 初始居中用
top: 50%; left: 50%; transform: translate(-50%, -50%) - 后续微调（如向上偏移40px）直接改
transform: translate(-50%, -50%) translateY(-40px) - 别混用
top和transform：transform优先级更高，top会被覆盖且逻辑难维护 - 注意：
transform会让元素创建新图层，在低端设备上大量使用可能增加内存占用
Safari中dialog不居中？检查父元素是否带transform或will-change
Safari（尤其是15.4–16.3）对dialog的定位极其敏感：只要它任意祖先元素有transform、will-change、perspective或filter，dialog就可能完全错位、不居中，甚至整个backdrop消失。
- 确保
dialog是的**直接子元素**，中间不能嵌套任何带上述CSS属性的容器 - 检查
本身有没有transform: scale(1)之类“无意义但致命”的样式 - 如果必须用flex/grid布局页面主体，把
dialog提出来放到底部前，而不是塞进<main></main>或<div class="app">里 <li>开发时用<code>getBoundingClientRect()验证：调用showModal()后立刻查，返回{x: 0, y: 0, width: 0, height: 0}说明它根本没激活，八成是结构或样式违规
实际项目中最容易被忽略的，是
dialog与祖先元素的隐式样式耦合——它不像div那样“随遇而安”，一旦父级带transform，整个模态链路就断了，连showModal()都可能静默失败。
