<dialog>默认不居中，需用position:fixed+transform实现；仅showModal()触发的dialog匹配:modal伪类并生成::backdrop遮罩；移动端须处理滚动、焦点及宽度适配。
dialog默认不居中，需要CSS手动控制
HTML <dialog> 元素本身没有内置居中逻辑，即使设置了 open 属性，它也会按普通块级元素从文档流顶部开始渲染（通常紧贴 <body> 顶部），视觉上完全不居中。这不是bug，是规范行为。
要实现水平+垂直居中，必须用CSS干预。最可靠的方式是结合 position: fixed 和 transform：
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脱离文档流，基于视口定位 -
top: 50%; left: 50%把左上角锚点移到视口中心 -
transform: translate(-50%, -50%)向左上各挪自身宽高的一半——这是关键，否则只是“锚点”居中，不是元素整体居中 - 务必重置
margin和border，否则浏览器默认样式会干扰定位
dialog.open状态下的样式只能通过:not([open])或:modal伪类区分
原生 <dialog> 没有 :open 伪类（那是旧草案，已被移除）。目前标准中，只有 :modal 可用于匹配当前正在显示的 dialog（即已调用 showModal() 的实例）；而 show() 打开的 dialog 不匹配 :modal，也无法用纯CSS区分是否 open。
所以实际开发中更稳妥的做法是：
立即学习“前端免费学习笔记（深入）”；
Article To Html
下载
文章转信息图。将文章/笔记转化为手机可读的 HTML 信息图，自动匹配视觉风格。触发场景：文章转图、笔记转图、信息图、转小红书图、做张图、可视化这篇文章、文生图。
- 统一用
showModal()触发弹窗（保证可被:modal匹配） - 用
dialog:modal写打开时的样式，用dialog:not([open])或单独 class 控制关闭态隐藏逻辑 - 避免依赖
[open]属性做显隐切换——因为open属性在调用show()或showModal()后立即存在，但元素可能还未渲染完成，CSS过渡容易失效
示例：
dialog {
display: none; /* 默认隐藏 */
}
dialog:modal {
display: block;
/* 此处写居中、动画等样式 */
animation: fadeIn 0.2s ease-out;
}dialog背景遮罩（backdrop）样式必须用::backdrop伪元素
只有通过 showModal() 打开的 <dialog> 才会生成 backdrop 层，且它不可选中、不可交互，样式只能通过 ::backdrop 控制。
-
::backdrop必须紧跟dialog:modal使用，单独写无效 - 它默认是全屏、透明黑色，常用调整包括：
background: rgba(0,0,0,0.6)、backdrop-filter: blur(4px)（注意兼容性） - 不能给
::backdrop设z-index，它的层级固定在 dialog 下方、其他内容上方 - Firefox 目前不支持
::backdrop（截至 v125），需用 JS 模拟遮罩层作为降级方案
典型写法：
dialog:modal::backdrop {
background: rgba(0, 0, 0, 0.55);
animation: fadeBack 0.15s ease-out;
}移动端适配和focus管理容易被忽略
dialog 在移动设备上常出现滚动穿透、键盘顶起、焦点丢失等问题，光靠居中 CSS 不够。
- 打开 dialog 时，建议给
<body>加overflow: hidden防止背景滚动（::backdrop无法阻止 touchmove） - 确保 dialog 内第一个可聚焦元素自动获得焦点（比如按钮或输入框），否则屏幕阅读器和键盘用户无法操作；可用
dialog.addEventListener('aftertoggle', () => { dialog.querySelector('input, button')?.focus() }) - 关闭 dialog 后，焦点应回到触发它的元素（如按钮），否则键盘用户会迷失在页面顶部
- 不要用
width: 100vw设置 dialog 宽度——移动端 viewport width 包含滚动条宽度，会导致横向溢出
真正让 dialog 可用的，从来不是“能不能居中”，而是“焦点去哪了”“背景还滚不滚”“关掉后用户在哪”。这些细节没处理好，居中了也没用。
