Flex 居中更鲁棒，父容器设 display: flex; justify-content: center; align-items: center; min-height: 100vh；label 与 input 垂直不对齐需统一 vertical-align: middle；多列用 Grid 更稳；移动端优先用 100dvh 防高度坍塌。
表单整体居中用 Flex 而不是 margin: 0 auto
表单整体在页面中水平垂直居中，margin: 0 auto 只能水平居中且必须设 width，而复杂表单往往宽度不固定、内容响应式变化，硬设宽容易断行或溢出。Flex 是更鲁棒的选择。
- 父容器（比如
<body>或包裹<form>的<div>）加display: flex; justify-content: center; align-items: center; min-height: 100vh; -
<form>本身不用设宽，也不用margin，它会自动成为 flex item 并居中 - 如果表单内有长文本或按钮撑高，
align-items: center可能导致顶部留白过多——此时改用align-items: flex-start+ 内部再嵌一层 flex 垂直居中更可控 - 注意：父容器不能同时是
display: grid或display: flex且设置了flex-direction: column等干扰项，否则justify-content行为会被覆盖
label 和 input 垂直不对齐的根因是 vertical-align
常见现象：标签文字底部和输入框底边不在一条线上，尤其在 Chrome 和 Safari 中明显。这不是 margin 或 padding 没调好，而是浏览器默认对 <label>（baseline 对齐）和 <input>（也 baseline，但基线位置不同）的渲染差异。
- 统一给所有表单控件加
vertical-align: middle;：包括<input>、<select>、<textarea>、<button> - 确保父级容器（如每行的
<div class="form-row">）没有意外的line-height，可显式设为line-height: normal; - 别用
float布局表单行——它会让vertical-align失效，且清除浮动易漏，现在已无必要 - iOS Safari 对
<label>的点击热区有额外偏移，若发现点不中，加cursor: pointer;和user-select: none;能缓解
多列表单用 Grid 比 Flex 更稳
当表单需要两列（如“姓名”+“邮箱”并排）、三列地址字段，或带校验图标、帮助文本的复合行时，Flex 容易因内容长度不一导致换行错位；Grid 的列轨道控制更精确。
- 给表单容器设
display: grid; grid-template-columns: 1fr 1fr;（双列等宽）或grid-template-columns: 120px 1fr 80px;（标签宽 + 输入框 + 操作按钮） - 每个
<div class="form-group">包含<label>和<input>，用grid-column: span 2;让某些行跨列（如提交按钮） - 避免直接对
<form>设 Grid —— 它会把所有子元素（包括<h2>、<p>）都变成 grid item；应只对实际输入行的父容器（如<div class="form-grid">）启用 - Grid 在 Safari 16.4+ 和 Chrome 105+ 完全支持，IE 不支持，但 IE 已退出主流维护，无需降级
响应式下表单居中容易忽略高度坍塌
移动端小屏时，表单行堆叠变高，若父容器靠 min-height: 100vh 居中，但内容总高度超过视口，就会出现滚动后表单“悬空”在顶部，不再居中。
立即学习“前端免费学习笔记（深入）”；
- 不要依赖
100vh做垂直居中容器高度——它包含地址栏等 UI，Safari 移动端会动态变化 - 改用
height: 100dvh;（dynamic viewport height），现代浏览器已支持，能响应地址栏收起/展开 - 如果需兼容旧版 Safari，用 JS 动态计算并设置
style.height = window.innerHeight + 'px';，并在resize事件里更新 - 真正关键的是：居中逻辑只应在初始加载时生效，滚动不重算；否则频繁触发 layout shift，影响 LCP 指标
