弹窗内表单元素居中需用flex布局统一控制：内容区设display: flex、justify-content: center和align-items: center；label、input、button统一display: inline-block和font-family；dialog需position: fixed+transform居中；动态内容需min-height或JS补偿。
弹窗里的标签（<label>、<input>、<button>等）要居中对齐，关键不是单独调每个元素的 margin 或 vertical-align，而是统一它们的渲染上下文——否则在不同浏览器里差 1–2px 是常态。
弹窗容器必须用 flex 布局做主轴控制
别在弹窗最外层用 text-align: center 或 margin: 0 auto，那只能水平居中整个弹窗框，对内部表单控件无效。真正起作用的是把弹窗内容区（比如 <div class="form-section">）设为 display: flex：
-
justify-content: center控制标签组整体水平居中 -
align-items: center让<label>和<input>垂直对齐（前提是它们高度一致） - 避免把整个
<dialog>或<div>设为 flex 容器——会干扰遮罩层或滚动行为，只包裹实际表单行
label 和 input 必须显式统一 display 和 font-family
vertical-align: middle 单独写基本没用，因为 <input> 的 baseline 在 Chrome 和 Firefox 里算得不一样。解决路径很直接：
- 给
<label>、<input>、<button>都加display: inline-block（别用默认inline） - 强制
font-family继承：比如label, input, button { font-family: "Segoe UI", "Microsoft YaHei", sans-serif; } -
input[type="checkbox"]和input[type="radio"]要额外重置：margin: 0; padding: 0; vertical-align: middle; - 父容器（如表单行
<div>）设固定line-height: 24px，再让input的height也等于24px
dialog 标签里居中要额外处理定位上下文
<dialog> 默认不居中，即使加了 open 属性，它也会从 <body> 顶部开始渲染。所以不能只靠 flex 布局：
立即学习“前端免费学习笔记（深入）”；
- 必须给
<dialog>加position: fixed; top: 50%; left: 50%; transform: translate(-50%, -50%); - 它的父容器（通常是
<body>）不需要设position: relative—— 因为fixed是相对于 viewport 定位的 - 但要注意：移动端需加
max-width: 90vw; max-height: 80vh;防止溢出，且transform在 Android 4.3 及以下需加-webkit-transform - 如果弹窗里嵌了表格或 flex 容器，记得
box-sizing: border-box必须全局生效，否则边框和 padding 会让高度计算失准
最容易被忽略的是：当弹窗里有动态内容（比如异步加载的 <select> 或富文本编辑器），flex 的 align-items: center 会失效——因为高度还没确定。这时候得用 min-height 或 JS 补偿，而不是硬调 margin-top。
