弹窗文字排版需同步解决定位居中、内容高度适配、多语言伸缩、动态加载四问题：先用 fixed+transform 居中容器，重置段落标题 margin，语义化标签配合 lang 属性，避免固定宽高与绝对定位，全局 box-sizing: border-box。
弹窗里的文字排版不是调个 text-align 就完事——它必须和弹窗定位、内容高度、多语言伸缩、动态加载这四件事咬死对齐，否则一换浏览器或一加翻译就错位。
弹窗容器本身得先居中，否则内部排版全白搭
很多人直接给弹窗内容区加 text-align: center，结果整个弹窗框还贴着左上角。真正起效的是先让 <dialog></dialog> 或外层 <div class="modal"> 在视口里物理居中：
<ul>
<li>
<code><dialog></dialog> 必须加 position: fixed; top: 50%; left: 50%; transform: translate(-50%, -50%);
max-width: 90vw; max-height: 80vh;，防溢出position: relative——fixed 是相对 viewport 的，加了反而干扰-webkit-transform 兼容段落与标题用语义标签，但默认样式必须重置
弹窗里写 <p></p> 和 <h3></h3> 没问题，但浏览器默认的上下 margin 会撑开弹窗高度，导致内容被截断或滚动条意外出现：
- 统一重置：
p, h1, h2, h3, h4, h5, h6 { margin: 0.5em 0; }（比默认1em更紧凑） - 首行缩进中文段落：用
text-indent: 2em，别空格、别 - 标题右对齐？写
h3 { text-align: right; }，别用废弃的align="right"属性 - 如果弹窗里有中英文混排，英文部分显式包一层
<span lang="en">Hello</span>，避免标点间距异常
动态内容加载后，文字高度没算准，flex 垂直居中就失效
弹窗打开后才异步插入 <select></select>、富文本或长错误提示，这时 align-items: center 会把内容压到顶部——因为父容器高度还是初始值（比如 min-height: 200px），但内容已变高。
- 方案一：给弹窗内容区设
min-height: 240px（预估最小高度），再配display: flex; align-items: center; - 方案二：JS 监听内容加载完成，手动触发
dialog.showModal()前重设高度，或用ResizeObserver动态更新 - 绝对别用
vertical-align: middle对块级元素生效——它只对 inline/inline-block 元素有效，且在不同浏览器 baseline 计算不一致
多语言文案一进来，按钮和提示就崩，根源在 HTML 结构
德语“Zurücksetzen”比中文“重置”长一倍，日文“検索”在固定宽表格里挤变形——这不是 CSS 能修的，是结构锁死了伸缩能力：
- 按钮必须用
<button>重置</button>，不能是<div data-i18n="reset"></div>；否则翻译失败时空白+无点击热区 - 表单控件禁用
width: 120px、table-layout: fixed、position: absolute - 所有文本容器（包括弹窗主体）必须声明
lang属性，比如<div class="modal" lang="zh-CN">；AJAX 插入的新节点也要手动设 <li>验证是否真兼容：用 W3C Validator 检查，报错 <code>Element “button” must not be empty就说明 fallback 文字缺失
最常漏掉的其实是 box-sizing: border-box 全局生效——弹窗里加了 padding 或 border 后，高度计算失准，flex 居中立刻偏移 2–3px，而且只在 Chrome 里明显，Firefox 看不出，这就最麻烦。
