label是行内元素，直接加margin: 0 auto无效；须在父容器设text-align: center实现水平居中，若父容器为flex/grid则改用justify-content: center或place-items: center。
label 是行内元素，直接加 margin: 0 auto 没用
很多人给 <label></label> 自己写 margin: 0 auto，发现完全不居中——因为 label 默认是 display: inline，而 margin-left/right: auto 对行内元素无效。浏览器只认父容器的文本对齐规则。
真正起作用的是父元素的 text-align: center，它会让所有行内级内容（包括 label、span、img、纯文本）整体水平居中。
- ✅ 正确做法：在
label的直接父容器上设text-align: center - ❌ 错误做法：给
label加margin: 0 auto或display: block后不设宽度就用margin: 0 auto - ⚠️ 注意：如果父容器用了
display: flex或display: grid，text-align会被忽略，此时得改用justify-content: center
想让 label 和 input 一起居中，但又保持左右对齐？
常见场景是表单里 label 和 input 并排，希望整组在页面中居中，同时两者自身横向对齐。这时候不能只靠 text-align，否则 input 作为替换元素可能错位。
- 推荐用
display: flex包裹这一组：<div class="form-group"> <label>用户名</label><input type="text"> </div> - 给
.form-group设display: flex; align-items: center; justify-content: center; - 再给
label加flex: 0 0 80px（固定宽度），input加flex: 1填充剩余空间 - 如果父容器高度不确定，避免依赖
line-height垂直对齐，flex的align-items: center更可靠
垂直居中 label 要小心 line-height 和 height 不匹配
有人用 line-height: 40px 配合 height: 40px 和 vertical-align: middle 想让 label 垂直居中，结果文字偏高或偏低——问题常出在字体度量（ascent/descent）和行盒（line box）实际渲染高度不一致。
立即学习“前端免费学习笔记（深入）”；
- ✅ 更稳的方式：把
label父容器设为display: flex; align-items: center;，不用算line-height - ⚠️
vertical-align: middle只在行内上下文有效（比如和img并排时），单独对label设置基本没效果 - ❌ 不要给
label加height+line-height强制撑开，容易导致文字截断或换行异常
响应式下 label 居中失效？检查父容器是否被 flex/grid 接管
在用 Bootstrap、Tailwind 或自定义组件库时，label 突然不居中了，大概率是父容器被设成了 display: flex 或 display: grid，此时 text-align: center 完全失效。
- 确认父容器 computed style 中的
display值，不是block就别指望text-align - 如果是
flex容器，统一用justify-content: center控制子项水平位置 - 如果是
grid容器，用justify-items: center或place-items: center - 临时调试技巧：在 DevTools 里手动删掉父容器的
display: flex，看text-align是否恢复生效
label 居中看着只是加一行样式，但背后牵扯到 display 类型、父容器布局上下文、字体渲染细节三层逻辑。最容易被忽略的是：你写的那条 CSS 到底作用在哪个元素上，以及它当前处于哪种布局模式里。
