label本身不能左右居中，需通过其父容器控制：纯文本时父容器设text-align:center；label+input组合用flex容器加justify-content:center；垂直对齐推荐flex加align-items:center。
label 元素本身不能“左右居中”——它是个行内元素，默认不占据整行，也没有独立的水平定位能力。真正要做的，是控制 label 所在的**上下文容器**，或调整它与其他元素（比如 input）的组合布局方式。
label 在父容器中水平居中（纯文本场景）
如果 label 是单独一行、无其他兄弟元素，且你想让它在页面或某个区域里水平居中，就给它的**直接父容器**加 text-align: center：
-
label必须是行内级（默认就是），不能设display: block后又忘了配margin: 0 auto - 父容器要是块级（如
div、section），且宽度小于视口，否则看不出居中效果 - 不要在
label自身上写text-align: center—— 它对自身内容无效，只影响其子元素（而label通常没有子行内元素）
示例：
<div style="text-align: center;"><label>用户名</label></div>
label + input 组合水平居中（表单常见需求）
多数时候你不是只想居中 label，而是想让整个 label+input 组在页面中居中。这时别拆开操作，用 display: flex 包一层：
立即学习“前端免费学习笔记（深入）”；
生成可在 deepbi 沙箱 iframe 内运行或作为独立文件运行的交互式 HTML 页面，使用 `window.deepbi` JS SDK 实现数据查询、空间管理、文件浏览及用户操作。当用户提出以下需求时启用该能力： - 创建 KPI 仪表盘、数据表格、文件浏览器、成员列表、管理页面； - 明确要求“转成 dhtml”、“转译成 HTML”、“把 XX 页面转成……”、“控制台页面”、“管理后台”、“DeepBI 页面迁移”； - 提及位于 `apps/console/src/featur
- 把
label和input放进同一个div，给该div设display: flex; justify-content: center - 如果还希望它们垂直居中（比如在卡片里），再加
align-items: center - 避免用
text-align: center套整个表单——它会让所有行内内容都居中，包括按钮、错误提示，容易失控
示例：
<div style="display: flex; justify-content: center;"><label>邮箱：</label><input type="email"></div>
label 和 input 垂直对齐不齐？别碰 margin
常见现象：label 看起来比 input 高一截，手动加 margin-bottom 或 padding 治标不治本。根本原因是浏览器按基线（baseline）对齐，而两者的基线位置天然不同。
- 最稳解法：用
display: flex包裹每组label+input，一句align-items: center就解决 - 若必须用 inline 布局（不推荐），需同时设
label { display: inline-block; vertical-align: middle; }和input { vertical-align: middle; }，缺一不可 -
vertical-align对label本身生效的前提是它已脱离纯行内流（即设了display: inline-block或table-cell）
table 中的 label 怎么居中？别设在 table 上
如果 label 在 td 里，想让它在单元格内水平+垂直居中，样式必须落在 td 上，而不是 table 或 tr：
-
td { text-align: center; vertical-align: middle; }—— 缺一不可 -
table { margin: 0 auto; }只能让整个表格居中，不影响内部文字 - 不要用废弃的
align="center"属性，现代浏览器虽兼容但不可靠，且无法控制垂直方向
真正难的不是写哪条 CSS，而是分清“谁在居中”和“谁被居中”。label 几乎从不独自承担居中责任，它总是依赖父容器的布局模式。选错层级，样式就永远不生效。
