label默认为inline元素，height和vertical-align对其无效；单行文字垂直居中应设父容器line-height等于height；多行或与input对齐时，推荐用flex容器统一控制align-items。
label 默认是 inline 元素，不能直接设 height 或 vertical-align 生效
很多人一上来就给 label 写 height: 24px 或 vertical-align: middle，发现完全没反应——因为 label 默认是 display: inline，而 height、padding-top、vertical-align（在非 table-cell 或 flex 场景下）对纯内联元素的“内容高度”不产生垂直居中效果。
真正起作用的是它所处的上下文：
- 若
label是父容器里的唯一内联子元素，靠父元素line-height = height可实现单行文字视觉居中 - 若要稳定控制，必须显式改变
label自身的显示模式，或把它放进一个支持对齐的布局容器里 - 单独设
vertical-align: middle只在和同级 inline/inline-block 元素共存时才有相对意义（比如和input并排），不是绝对居中
单行 label 文字垂直居中：用 line-height 匹配容器高度
适用于 label 独占一行、且父容器高度固定的情况（例如表单行高统一为 32px）：
- 父容器（如
div）设height: 32px; line-height: 32px; -
label保持默认display: inline，不设height，只确保字体大小合理（如font-size: 14px） - 文字会自动沿行高中心线对齐；但注意：若字体实际行高超出容器（如用了大
line-height或带 descender 的字体），仍可能溢出
示例：
.form-row { height: 32px; line-height: 32px; }
.form-row label { font-size: 14px; }
多行 label 或需精确控制：display: flex + align-items
当 label 内容可能换行，或你希望它和旁边的 input、button 垂直对齐时，最可靠的方式是让 label 自己成为 flex 容器：
立即学习“前端免费学习笔记（深入）”；
- 给
label加display: flex; align-items: center;，它内部的文字就会垂直居中 - 需配合
flex-direction: column才能对多行文本整体居中（否则只对每行文字基线居中） - 更常见且推荐的做法是：把
label和input一起包进一个div.form-row，对该div设display: flex; align-items: center;，而不是折腾label单独居中
错误示范：label { display: flex; align-items: center; } → 若 label 里有子元素（如 span），容易破坏语义与可访问性
和 input 并排时垂直不对齐？别调 label，统一管父容器和 input
绝大多数“label 和 input 不对齐”问题，根源不在 label，而在三处未同步：
- 所有表单控件（
input、select、button）必须统一vertical-align: middle（不能只设label） - 父容器（如
.form-row）必须用display: flex; align-items: center;，而不是依赖 baseline 对齐 -
input必须重置box-sizing: border-box，否则 padding/border 会让它的实际高度不可控
最容易被忽略的一点：HTML 源码里 label 和 input 之间的换行或空格，会被渲染为一个空白字符，导致 flex 容器里出现意外间隙。要么写成 <label>xxx</label><input> 连写，要么给父容器设 font-size: 0 再单独恢复子元素字号。
