label 必须设为块级元素才能用 text-align 居中文本，因其默认是行内元素，width 和 text-align 均无效；最稳妥写法是 label { display: block; width: 100%; text-align: center; margin: 0; }。
label 元素默认是行内元素，即使设了 width: 100% 也不会自动撑满父容器宽度，更不会触发文本居中效果。直接加 text-align: center 到 label 上无效，是因为它没获得块级上下文。
label 必须先变成块级元素才能用 text-align
只有块级（或至少是块格式化上下文）元素才响应 text-align。行内元素的 text-align 不起作用。
- 给
label加display: block或display: inline-block（后者需配合width: 100%） - 如果父容器是 flex 布局，
label即使是行内元素也会被拉伸，此时可对父容器设justify-content: center，但这是“容器居中”，不是“文本居中” - 别依赖
align="center"属性——HTML5 已废弃该属性，且在label上根本无定义
常见错误：width: 100% 但 label 没占满
这是因为 label 默认是 display: inline，width 对其无效。浏览器会忽略这个声明。
- 必须显式设置
display: block或display: inline-block - 若父容器有 padding 或 border，
width: 100%是相对于 content box 的，可能视觉上没“顶到边”；可用box-sizing: border-box避免 - 检查是否被其他 CSS（比如
float、position: absolute）干扰了正常流布局
最稳妥的写法（兼容性 & 可维护性兼顾）
不用 hack，不依赖父容器类型，直击本质：
label {
display: block;
width: 100%;
text-align: center;
margin: 0;
}
- 不推荐用
inline-block+width: 100%，因为行内元素的 100% 宽度行为在不同浏览器中略有差异 - 避免用
text-align: center设在父容器上——那会把所有子内容（包括 input、span 等）一起居中，不是只针对 label 文本 - 如果 label 包含
input，注意display: block后 input 会换行；需要并排时改用 flex 布局更可控
真正容易被忽略的是：很多人调了半天 text-align，却忘了 label 根本没获得块级渲染能力。这不是样式优先级问题，是渲染模型层面的限制。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
