label设width失效因其默认display:inline，内联元素不响应宽高及上下外边距；需改为block/inline-block、float或flex子项；居中文字用text-align:center（需先转为inline-block），整行居中应包裹form-row并flex居中，对齐问题需vertical-align:middle或flex align-items:center。
label 本身是内联元素，设 width 不生效，直接写 width: 120px 没用 —— 这是绝大多数人卡住的第一步。
为什么 label 设置 width 失效？
label 默认是 display: inline，而内联元素不响应 width、height、margin-top/bottom。必须先让它变成块级或弹性项：
- 加
display: block或display: inline-block（后者保留行内特性，更常用） - 加
float: left（会触发块级化，但需处理父容器塌陷） - 放进
display: flex容器里（推荐，天然支持对齐和尺寸控制）
label 固定宽度 + 水平居中（整个 label 文字居中）
如果你要的是：每个 label 自身宽度固定（比如 100px），且其中文字在它内部水平居中（不是 label 在页面中居中），那就很简单：
.label-centered {
display: inline-block;
width: 100px;
text-align: center;
}
注意：text-align: center 只对内容起作用，前提是 label 已具备可设定的宽度上下文（即已转为 inline-block 或 block）。
label 固定宽度 + 整体在表单中水平居中（整组 label+input 居中）
这其实是两个需求叠加：label 要固定宽，同时整行（或整个表单）要在页面中居中。常见错误是只居中 label，结果 input 漂走了。
- 别单独给
label加margin: 0 auto—— 它是内联元素，automargin 无效 - 正确做法：把
label和input包进一个div.form-row，再让这个div居中 - 例如：
div.form-row { display: flex; justify-content: center; }，然后label设flex: 0 0 120px，input设flex: 1 - 如果想整个表单居中，更稳妥的是：
form { width: fit-content; margin: 0 auto; }（现代浏览器都支持）
容易被忽略的 baseline 对齐问题
即使你设了 display: inline-block; width: 100px; text-align: center;，Chrome 下 label 和紧邻的 input 仍可能看起来“没对齐”——实际是 baseline 对齐导致 label 底部略高。
解决它最直接的方式不是调 margin，而是统一垂直对齐方式：
label, input {
vertical-align: middle;
}
或者更彻底：用 display: flex; align-items: center; 包裹每组，直接绕过 baseline 计算逻辑。
真正麻烦的从来不是“怎么设宽”，而是“设完宽之后，它跟谁对齐、怎么不飘、为什么看着偏高”。这些细节一漏，调试半小时就没了。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
