label文字居中需区分内容居中与盒子居中：文字居中用text-align:center；盒子居中需设宽高后margin:0 auto，或父容器flex+justify-content:center；label与input垂直对齐推荐flex+align-items:center。
label 本身不能“居中”，它只是个行内语义标签，真正起作用的是它的渲染盒（box）和父容器的布局行为。想让它视觉上居中，得先明确：你要的是
label 文字内容怎么水平居中
这是最常见需求，比如表单里一个独立 label 单独占一行，想让里面文字居中显示。
- 直接给
label加text-align: center;—— 它默认是块级元素，text-align对内部文字生效 - 别用
<label align="center"></label>：HTML5 已废弃，Chrome 可能模拟 float 行为，Firefox 可能忽略，W3C 验证器报错 - 如果
label被包在div里且该div设了display: flex，text-align就失效了，得改用justify-content: center
label 整体在父容器中水平居中（比如居中显示一个提示 label）
这时你是在控制 label 这个块级盒子的位置，不是它里面的字。
- 给
label设明确宽度（如width: 200px;），再加margin: 0 auto; - 若父容器是
display: flex或display: grid，margin: 0 auto会失效，此时必须在父容器上设justify-content: center - 避免用
text-align: center试图“推”整个label居中——它只影响内部行内内容，对块级label自身位置无影响
label 和 input 垂直对齐不齐，怎么一招解决
这不是 label 自己的问题，而是它和 input 默认按基线（baseline）对齐，而两者的 baseline 位置天然不同：文字底边 vs 输入框中间偏下。
立即学习“前端免费学习笔记（深入）”；
- 根本解法是用
display: flex包裹每组label+input，配align-items: center;—— 一句搞定，稳定跨浏览器 - 若必须用 inline 布局，得同时设：
label { display: inline-block; vertical-align: middle; }和input { vertical-align: middle; }，缺一不可 - 别给
label加padding-bottom想“顶”起input：它只渲染可见区域，推不动input的位置 - iOS Safari 对
label点击热区有偏差，建议加cursor: pointer和显式min-height: 1.2em
label 在表格中居中，为什么 text-align 不生效
因为 text-align 必须写在 td 或 th 上，而不是 table 或 tr 上。
- 错误写法：
<table style="text-align: center;"> → 表格内所有 <code>label文字都不动 - 正确写法：
<td style="text-align: center;"><label>用户名</label></td> - 如果
label里嵌了div且设了display: block，text-align不会穿透进去，那个div得自己加margin: 0 auto或display: flex - 统一控制：用
table td, table th { text-align: center; }
最容易被忽略的一点：label 和 input 的对齐问题，90% 不是样式没写对，而是没意识到它们根本不在同一个布局上下文中——flex 容器能屏蔽基线干扰，但一旦混用 float、position: absolute 或嵌套了不同 display 类型的容器，错位立刻出现，且很难一眼定位。
