label 本身不能直接居中，需通过其父容器控制：文字居中用 text-align: center（父设），整组 label+input 居中用 flex + justify-content: center，表格中垂直对齐错位需统一 vertical-align: middle 或改用 flex 布局。
label 元素本身不能直接“居中”，得看它在什么上下文中
单独给 label 加 text-align: center 没用——因为 text-align 是父元素的属性，作用对象是它的**行内子内容**，不是它自己。你真正想居中的，其实是整个表单区域、某一行 label+input 组合，或 label 文字在容器内的位置。
让 label 文字在父容器里水平居中（比如表单顶部标题）
如果 label 是作为表单标题用的（例如 <label>用户注册</label>），它默认是 inline 元素，要让它文字居中，必须确保它的父容器设置了 text-align: center，且 label 本身没被强制设成 block 或 float。
- ✅ 正确写法：
.form-header { text-align: center; }+<div class="form-header"><label>用户注册</label></div> - ❌ 错误写法：直接对
label设margin: 0 auto（无效，inline 元素不认这个） - ⚠️ 注意：如果 label 被包在
flex容器里，默认会拉伸占满，此时text-align失效，得用justify-content: center
让 label 和 input 整体居中（常见表单布局需求）
多数人说的“label 居中”，其实是希望整组 label+input 在页面中水平居中。这时不要动 label 单独的样式，而是控制它的**包裹容器**：
- ✅ 推荐：用
display: flex包一层div，再设justify-content: center，例如：<div style="display: flex; justify-content: center;"> <label for="name">姓名：</label> <input type="text" id="name"> </div>
- ✅ 兼容老浏览器：把整组放进
div，设text-align: center，同时确保label和input都是inline或inline-block（input默认就是inline-block） - ❌ 别用
<center></center>标签——已废弃，HTML5 不合法，且语义错误
表格布局里 label 垂直对齐偏高，看着像“没居中”
在 <table> 中，<code>label 和 input 默认基线（baseline）不一致，label 文字底边对齐，input 框体中间偏下对齐，导致视觉上 label “浮得太高”。这不是居中问题，是垂直对齐错位：
立即学习“前端免费学习笔记（深入）”；
- ✅ 解法一：统一设
vertical-align: middle到td > label和td > input（注意必须都加） - ✅ 解法二：更干净的做法是放弃表格布局，改用
display: flex的form-group，一句align-items: center就稳了 - ⚠️ 避免：只给 label 加
padding-bottom或只调 input 的margin-top——治标不治本，换字体或字号就又偏了
