label行内居中靠vertical-align: middle配对使用，而非text-align或margin:auto；因text-align只作用于块级容器内行内内容，单个inline label自身无“内部行”可居中，故label{text-align:center}无效。
label 行内居中对齐不是靠 text-align: center 或 margin: auto，而是靠统一基线 + 垂直对齐控制。直接设 vertical-align: middle 是最轻量、兼容性最好的解法。
为什么 text-align: center 对单个 label 无效
text-align 只作用于块级容器内的**行内内容**，而单独一个 label 默认是 display: inline，它本身没有“内部行”可居中。给它加 text-align: center 完全不生效。
- 常见误操作：
label { text-align: center; }—— 没用 - 真正起效的是父容器（如
div或td）设text-align: center，但这会让整个行内容居中，不是“label自身居中” - 若想让
label文字在自身宽度内水平居中，需先转为块级：label { display: block; text-align: center; }
vertical-align: middle 是核心，但必须配对使用
行内元素的垂直位置由 vertical-align 控制，但它的效果依赖**同层兄弟元素**。单独给 label 设 vertical-align: middle 往往没变化，因为没参照物。
- 典型场景：和
input同行显示时，必须同时设置：label, input { vertical-align: middle; } - 若父容器是
td，还要确认td的vertical-align没被覆盖（默认是middle，但某些重置 CSS 会改成baseline） - 在 Flex 容器里，
vertical-align完全失效 —— 此时该用align-items: center
Flex 布局下 label 居中要换思路
一旦把 label 和 input 包进 display: flex 容器，vertical-align 就被忽略。此时“居中”指交叉轴（y 轴）对齐，靠的是容器属性。
- 必须设容器：
.form-row { display: flex; align-items: center; } -
label本身不需要vertical-align，但建议加margin-right: 0.5em或用gap控制间距 - 如果
label内容过长换行，加white-space: nowrap; overflow: hidden; text-overflow: ellipsis;防布局撑开
最容易被忽略的一点：iOS Safari 对 input[type=checkbox] 和 label 的基线计算有偏差，哪怕加了 vertical-align: middle 仍可能偏上。这种情况下，得额外给 label 加 margin-top: -1px 或用 transform: translateY(-1px) 微调 —— 不是 bug，是渲染引擎差异。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
