原生dialog在iframe中无法居中且功能失效，根本原因是其模态行为依赖顶层浏览上下文；必须将dialog置于主页面body下，通过postmessage由iframe控制，或改用css/js模拟弹窗。
dialog在iframe里不居中，根本原因是脱离了顶层视口定位上下文
原生dialog元素的居中逻辑依赖浏览器将其作为**顶层浮层**渲染，且必须挂载在直系子节点。一旦嵌套在<iframe></iframe>内部，它就失去了对主窗口视口的感知能力——top: 50%; left: 50%计算的是iframe内容区域的“视口”，而非整个页面；更严重的是，::backdrop可能完全不渲染，showModal()的焦点锁定也会失效。
为什么不能把dialog直接塞进iframe的body里
即便你确保dialog是iframe内的子元素，问题依然存在：
-
showModal()只对**顶层浏览上下文**（即主页面）生效；iframe内调用会静默失败或抛错 - iframe的
window对象没有独立的模态栈，dialog:modal伪类无法匹配 - Safari 和部分旧版 Chrome 会直接忽略 iframe 中的
showModal()调用，控制台无报错但弹窗不出现 - 即使强行用
show()，它不加遮罩、不锁Tab键、不响应Esc——这已经不是dialog，只是个div
可行的替代方案：从iframe外控制dialog
真正能用上原生dialog全部能力的方式，是让dialog存在于主页面DOM中，由iframe通过postMessage触发：
- 主页面提前定义好
<dialog id="shared-dialog"></dialog>，并挂载在下 - iframe内通过
window.parent.postMessage({ type: 'OPEN_DIALOG', content: 'xxx' }, '*')发送指令 - 主页面监听
message事件，解析后调用document.getElementById('shared-dialog').showModal() - 关闭时，主页面发消息回iframe：
window.frames[0].postMessage({ type: 'DIALOG_CLOSED' }, '*') - 务必校验
event.origin防止XSS，不要用'*'上线
如果必须在iframe内实现弹窗效果，别硬套dialog
放弃原生dialog，改用CSS+JS模拟更可靠：
- 用
position: fixed+transform: translate(-50%, -50%)手动居中容器（需设明确宽高或max-width） - 遮罩层单独写一个
<div class="overlay">，同样<code>position: fixed; top: 0; left: 0; width: 100vw; height: 100vh; - 焦点管理要手写：打开时
dialogElement.focus()，按Tab时拦截并循环聚焦内部可交互元素 - Esc关闭需监听
keydown，判断e.key === 'Escape'后再close() - 别用
display: none隐藏，用hidden属性或aria-hidden="true"保持可访问性
原生dialog和iframe本质冲突，不是样式没写对，是规范层面就不支持。硬改CSS只会掩盖问题，最终在Safari或低版本Chrome里集体失效。
