label是行内元素，text-align: center必须作用于其父块级容器才生效；重置样式清除默认行高和垂直对齐基准，导致label与input视觉错位；推荐用flex布局整体控制对齐。
重置样式后 label 不居中，不是因为“重置错了”，而是因为 label 本身是行内元素，text-align: center 必须作用在它的**父容器**上才生效；而重置（如 normalize.css 或 * { margin: 0; padding: 0; }）往往清掉了默认的外边距和行高，让对齐更“裸露”，问题反而更明显。
为什么 reset 后 label 看起来偏上或不对齐
重置样式通常会抹掉浏览器默认的 label 行高、垂直对齐基准和父容器的 line-height。此时：label 和紧邻的 input 因 vertical-align 默认值不同（label 是 baseline，input 也是 baseline，但基线位置实际不一致），视觉上就错位了。
-
label文字本身没“居中失败”，只是它和表单控件之间的相对位置崩了 - 单纯给
label加margin: auto无效——它是行内元素，不认这个 - 只在
label上写text-align: center也没用——该属性对自身无意义，只影响其子内容（而label里通常只有文本）
label + input 组合水平居中的推荐写法
不要单独折腾 label，把 label 和 input 当作一个整体来布局。最稳的方式是用 flex 包裹它们：
- 给包裹容器（比如
<div class="form-item">）设 <code>display: flex和align-items: center -
label设flex: 0 0 auto（避免被压缩）或固定宽度（如width: 80px） -
input设flex: 1，并加min-width: 0防小屏溢出 - 如果要整体在页面居中，再在外层加
justify-content: center或margin: 0 auto（需设宽）
示例 CSS：
立即学习“前端免费学习笔记（深入）”；
实现 Markdown↔ HTML 互转，支持导出 PDF，用于用户请求的文档格式转换。
.form-item {
display: flex;
align-items: center;
gap: 0.5em;
}
.form-item label {
flex: 0 0 90px;
text-align: right;
}
.form-item input {
flex: 1;
min-width: 0;
}纯 label 文字在容器内水平居中（无 input 场景）
比如独立使用的说明性 label（如表单标题、筛选项标签），只需确保它被块级容器包裹，并在该容器上设置：
-
text-align: center—— 控制内部文字水平居中 - 若需垂直居中，容器必须有明确高度，并配合
line-height（单行）或display: flex; align-items: center（多行/稳健） - 避免用
margin: 0 auto直接作用于label—— 它不是块级元素，除非显式设display: block
错误写法：label { margin: 0 auto; }（无效）
正确写法：label { display: block; text-align: center; } 或更推荐：.label-container { text-align: center; }
兼容旧版 IE 时的 fallback 注意点
IE10 以下不支持 flex，若必须兼容，可用表格模拟：
- 父容器设
display: table; width: 100%; -
label和input分别包在display: table-cell的子元素里 - 给
table-cell元素加vertical-align: middle和text-align: center（对齐 label 文字） - 注意：这种写法语义弱、维护成本高，仅作为兜底，现代项目应优先降级到
inline-block + text-align组合
真正容易被忽略的是：重置后，label 的可访问性行为没变，但视觉断连会让屏幕阅读器用户更难建立控件与描述的关联。所以居中不只是美观问题，更是无障碍链路的一部分——对齐失效时，for/id 配对依然有效，但视觉线索丢了，用户得靠听觉反复确认。
