label多行文本每行居中需设text-align:center且display为block或inline-block；整体居中则用margin:auto（需显式宽）或父容器flex+align-items:center。
label 多行文本本身居中用 text-align
当 label 内容自然换行（比如设置了固定宽度、white-space: normal 且内容超长），要让每行文字都水平居中，只需在 label 上设置：text-align: center。这是最直接有效的方式。
注意：这个居中仅作用于文本内容本身，不控制 label 元素在父容器中的位置。如果父容器是块级元素且没其他布局干预，label 默认独占一行，视觉上看起来“整体居中”，但其实是文本居中 + 块级默认宽度撑满导致的错觉。
- 必须确保
label是display: block或inline-block（默认是inline，对text-align无效） - 避免父级
text-align: center和子级label { text-align: center }叠加造成理解混淆 - 若 label 被设为
flex或grid容器，text-align会失效，此时需用justify-content: center等替代
label 元素整体在父容器中居中用 margin: auto
要让整个 label（含多行文本）作为一个“盒子”在父容器里水平居中，得让它成为可居中的块级元素，并显式设宽：
label {
display: block;
width: 200px; /* 必须有明确 width 或 max-width */
margin-left: auto;
margin-right: auto;
}这个方案稳定、兼容性好，适用于所有现代浏览器及 IE9+。但容易踩的坑是忘记 display: block —— 默认 inline 的 label 设了 margin: auto 也无效。
立即学习“前端免费学习笔记（深入）”；
- 用
max-width: 80%替代width更适应响应式场景 - 若父容器是
flex或grid，margin: auto依然有效，但优先级低于justify-content，可能被覆盖 - 不要给
label加float，它会让margin: auto失效
父容器用 flex 实现 label 整体居中（推荐）
当 label 是表单中的一环（比如和 input 同组），或需要与其他兄弟元素一起排布时，更合理的做法是控制父容器，而不是死磕 label 自身：
.form-group {
display: flex;
flex-direction: column;
align-items: center;
}
<p>label {
text-align: center; /<em> 多行文本每行居中 </em>/
width: 100%; /<em> 避免缩窄后文字左对齐 </em>/
}这样 label 在父容器中整体居中，内部多行文字也各自居中，语义清晰、扩展性强。特别适合移动端小屏下 label 换行后的视觉一致性。
- 如果父容器同时包含
label和input，建议把它们一起包进flex容器，再用align-items: center统一对齐 -
align-items: center对flex-direction: column生效的是水平居中；对row才是垂直居中 - 避免在
label上写margin: 0 auto和父容器flex同时存在，逻辑冗余且易冲突
table 中的 label 居中要额外处理 display
如果 label 放在 <td> 或 <code><th> 里，而表格本身用了 <code>margin: 0 auto 居中，那里面的 label 还是可能靠左——因为 td 默认 text-align: left，且 label 是 inline。
解决方法分两步：
- 给
td或th加text-align: center - 给
label加display: inline-block和text-align: center（否则多行时只有第一行居中）
更彻底的做法是让 td 变成 flex 容器：display: flex; justify-content: center; align-items: center;，这样无论 label 单行还是多行，都能真正“整体居中”。
实际项目中最容易被忽略的，是 label 在不同上下文（普通 div / table cell / flex 容器）中默认 display 行为不一致，以及 text-align 对 inline 元素的天然限制。别只盯着“怎么居中”，先确认它此刻到底是什么 display 类型。
