text-align: center只作用于块级容器内的行内内容，不控制容器自身位置；多个label并排时，因各自宽度由文字撑开且默认inline，导致虽内部文字居中但整体左对齐参差不齐。
label 文字长度不一，为什么 text-align: center 不管用
因为 text-align 只控制**行内内容在块级容器内的水平对齐方式**，它不改变容器自身的位置。如果你把多个 <label></label> 直接并排放在一个父 <div> 里，又没设宽度或 display 类型，它们默认是 inline 元素——每个 <code><label></label> 宽度由文字撑开，text-align: center 对每个 label 自身生效，结果就是“每个 label 内部文字居中”，但 label 之间依然左对齐、参差不齐。
用 flex 布局让所有 label 左边缘对齐 + 文字居中
这才是真正可控的做法：不是让 label “自己居中”，而是让它们在统一网格中按列对齐。
- 给每组表单（
<label></label>+<input>）包一层<div class="form-row"> <li><code>.form-row { display: flex; align-items: center; gap: 0.5rem; } -
label { flex: 0 0 120px; text-align: right; padding-right: 0.5rem; }—— 固定宽度 + 文字右对齐，保证视觉左边缘一致 -
input, select, textarea { flex: 1; margin: 0; }—— 填满剩余空间，避免被 label 长度带偏 - 更稳的解法是：给
<td> 加 <code>display: flex; align-items: center; - 同时显式设
label { min-width: 10em; }，防短 label 被压缩 - 禁用所有表单控件的
vertical-align，统一由 flex 控制 - 注意：iOS Safari 对
<label></label>的点击热区识别较弱，建议加cursor: pointer; min-height: 1.2em; - 用
minmax(100px, 1fr)配合 grid：父容器设display: grid; grid-template-columns: minmax(100px, 1fr) 2fr; - 或 flex 下改用
label { flex: 0 0 clamp(90px, 12vw, 140px); }—— 浏览器原生支持，移动端缩放自然 - 避免用
width: 100%+text-align: center，这会让长 label 挤占 input 空间，破坏可访问性
表格布局里 label 对不齐？别碰 vertical-align
在 <table> 或 <code>display: table-cell 环境中，vertical-align: middle 表面有效，实则不可靠：它只对单元格内**单行行内内容**起作用；一旦 <label></label> 换行、或和 <input> 基线不同，立刻错位。
响应式下 label 宽度怎么变？别用 media query 硬调
为不同断点写多套 flex: 0 0 80px / 120px / 160px 很容易失控。实际项目中更推荐：
立即学习“前端免费学习笔记（深入）”；
真正难的不是让 label “看起来对齐”，而是确保它们在不同字体、缩放比、屏幕密度下仍保持语义清晰、点击可达、无障碍友好。flex 包裹 + 固定最小宽度 + 显式对齐控制，是目前最经得起压测的组合。
