label文字居中用text-align:center并设width；整行居中用flex容器justify-content:center；垂直对齐input用flex+align-items:center，避免vertical-align。
label 文字本身居中：用 text-align
如果只是想让 label 标签内的文字在自身宽度内水平居中，直接加 text-align: center 就行。这适用于 label 宽度固定、且你控制了容器宽度的场景。
常见错误是给 label 加了 display: block 却忘了设宽度，结果文字看似没居中——其实是块级元素默认占满父容器，text-align: center 有效，但视觉上没变化。要看到效果，得配合明确的 width 或 max-width。
- 适合单行、固定宽度的标题类 label（如“请选择城市”）
- 不推荐用于和
input同行对齐的常规表单项 label，否则会破坏左右结构 - 注意：它只影响 label 内部文字，不影响 label 和 input 的相对位置
label 与 input 水平居中对齐：用 flex 容器
真正常被问到的“label 居中”，其实是希望整行表单项（label + input）在父容器里水平居中。这时不要动 label 自身，而是把包裹它们的容器设为 display: flex，再用 justify-content: center。
示例结构：
立即学习“前端免费学习笔记（深入）”；
<div class="form-row"> <label for="name">姓名：</label> <input type="text" id="name"> </div>
CSS：
.form-row {
display: flex;
justify-content: center;
align-items: center; /* 垂直也居中 */
gap: 8px; /* label 和 input 间距 */
}- 必须确保
.form-row有足够宽度（比如width: 100%），否则居中无意义 - 如果 label 宽度不一致（比如有的长有的短），flex 默认会“挤在一起”居中；需要等宽 label，就得额外设
flex: 0 0 120px这类约束 - 避免在
label上同时设text-align: center和flex居中，容易造成双重居中错觉
label 垂直居中对齐 input：别信 vertical-align: middle
vertical-align: middle 在 inline/inline-block 场景下经常失效，尤其对 checkbox 和 radio——因为它们的 baseline 参考点和文字不同，浏览器实现也不统一。
更可靠的做法是放弃 inline 布局，改用 display: flex 并配 align-items: center：
.form-item {
display: flex;
align-items: center;
gap: 6px;
}- 这个方案绕开了 baseline 计算，直接按容器交叉轴中心对齐
- 对
textarea、select、button同样有效，无需单独 hack - 旧版 IE（display: table-cell +
vertical-align: middle，但维护成本高
label 文字两端对齐（justify）：慎用
text-align: justify 对单行 label 几乎无效，浏览器不会为一个词拉伸字间距。强行用伪元素模拟（如 :after { display: inline-block; width: 100% }）会导致换行异常或响应式断裂。
真要两端对齐，只建议在以下情况：
- label 是多行文本（比如带换行符的说明），且容器宽度固定
- 配合
hyphens: auto和word-break: break-word控制断行 - 测试过所有目标浏览器（Chrome/Firefox/Safari/Edge），确认无文字溢出或间隙突兀
绝大多数表单不需要两端对齐，左对齐 + 统一 label 宽度 + flex 布局，已经足够专业和可控。
