label本身无居中逻辑，其居中完全依赖父容器布局：水平居中需父容器设text-align: center；垂直居中须借助flex/align-items或table-cell/vertical-align；与input对齐推荐flex固定label宽度+右对齐。
label 本身不能直接“居中”，它没有内置居中逻辑；所谓“label居中”，本质是控制它在父容器中的定位方式——取决于你指的居中是水平、垂直、还是相对于某个表单控件（比如 input）对齐。
label 水平居中：别动 label，改父容器的 text-align
这是最常见也最容易翻车的点：label 默认是 inline 元素，不响应 margin: 0 auto，也不吃 align-self（除非父容器是 flex/grid）。
- 想让单个
label在其父<div> 里水平居中？给父容器加 <code>text-align: center - 如果父容器里还有其他行内内容（如
span、img），它们也会被一并居中；若只想居中label，就用单独一层包裹：<div style="text-align:center"><label>用户名</label></div> - 别给
label自己设display: block+margin: 0 auto—— 虽然能生效，但会破坏语义流，且在响应式断点下容易撑破容器 - 和
input并排时看起来“没对齐”？根本原因是它们基线（baseline）不同：label按文字基线，input默认按内部文本基线，且各浏览器实现有差异 - 统一方案：把
label和input包进一个display: flex容器，加align-items: center—— 这比单独调vertical-align: middle稳定得多 - 如果父容器是表格单元格（
<td>），可直接对 <code>label设vertical-align: middle，但仅限该场景；换成div就失效，因为vertical-align只对table-cell或inline/inline-block元素有效label 相对于 input 居中对齐：固定宽度 + flex 是唯一可控路径
很多设计稿要求“所有 label 左边缘对齐，右侧留等宽空白，input 填满剩余空间”，这时不能靠猜 margin，得结构化控制。
立即学习“前端免费学习笔记（深入）”；
- 每组
label+input必须独立包裹，例如：<div class="form-row"> <label>邮箱</label><input type="email"> </div> .form-row { display: flex; align-items: center; gap: 0.5em; }-
label { flex: 0 0 100px; text-align: right; }—— 固定宽度防换行，右对齐让文字贴紧 input -
input { flex: 1; min-width: 0; }——min-width: 0防止小屏下 flex item 溢出，尤其重要 - 避免用
float或inline-block+width：前者清浮动麻烦，后者受line-height和默认margin干扰严重
label 在 flex 容器里不居中？检查
align-items作用域很多人写了
display: flex却发现label还是顶部贴边，问题往往出在作用对象错了。-
align-items是父容器属性，控制所有子项在交叉轴（默认是垂直方向）的对齐方式；如果你只给label加了align-self: center，但父容器没设display: flex或display: grid，那这行 CSS 完全无效 - 如果父容器是
grid，则用justify-items（水平）或align-items（垂直），或者直接在label上用justify-self/align-self - 注意
flex-direction: column时，justify-content控制的是垂直方向，align-items控制水平方向——别记反
真正难的不是写哪条 CSS，而是意识到
label的“位置”永远由它所处的布局上下文决定；脱离容器谈居中，就像脱离重力谈下落——参数再细，也救不了结构错位。 - 每组
label 垂直居中：必须依赖容器上下文
纯 label 没有高度概念，垂直居中永远不是它自己的事，而是它和兄弟元素（如 input）、或父容器之间的关系问题。
