label 水平居中取决于父容器布局：常用父元素设 text-align: center；需块级特性时用 display: inline-block + 父容器 text-align: center；复杂结构推荐 Flex 布局（display: flex + justify-content: center）。

label 元素本身不能直接“水平居中”，它是否居中取决于父容器如何控制它的布局行为。 它默认是 inline 元素，不响应 margin: 0 auto，也不能靠自身加 text-align 生效——这个属性只对父元素有效。

给父容器设 text-align: center

这是最常用、也最容易理解的方式，适用于单个或多个 label 需要一起居中显示的场景（比如表单顶部标题、独立提示文字）。

• 只需在 label 的直接父元素（如 <div>、<code><p></p>、<header></header>）上设置 text-align: center
• 不需要改动 label 自身样式，也不用管它有没有 for 属性或是否关联控件
• 注意：该设置会影响父容器内所有行内级内容（包括文字、<span></span>、<img alt="HTML中label元素水平居中的基础设置方法" > 等），若只想居中某一个 label，得用额外包裹层隔离
• 它只管水平方向；垂直方向仍由 line-height 或父容器高度决定，单行时可配合 line-height 控制上下位置

用 display: inline-block + text-align: center 精确控制

当 label 需要设定宽度、内边距或背景色等块级特性，又希望保持水平居中时，可以把它变成 inline-block，再靠父容器居中。


Convert Markdown To HTML And PDF - Markdown和HTML、PDF互转
实现 Markdown↔ HTML 互转，支持导出 PDF，用于用户请求的文档格式转换。
下载
• 父容器仍设 text-align: center
• label 加 display: inline-block，之后就能设 width、padding、background 等了
• 避免加 vertical-align: top/middle/bottom 以外的值，否则可能和相邻行内内容错位
• 如果父容器有非零 font-size 且子元素是空 label，可能因空白符产生意外间隙，可用 font-size: 0 或注释掉换行来消除

用 Flex 布局让 label 在复杂结构中稳定居中

当 label 和其他元素（如 input、button）组成一组，并需要整体水平居中、同时内部对齐一致时，Flex 是目前最可靠的选择。

立即学习“前端免费学习笔记（深入）”；

• 把 label 和它关联的控件一起包进一个容器（如 <div class="form-item">） <li>该容器设 <code>display: flex 和 justify-content: center，整个组就水平居中了
• 若还需 label 和 input 垂直居中对齐，加 align-items: center
• 注意：不要对 label 单独设 margin: auto 或 flex: 1，除非你明确想让它撑满剩余空间

真正容易被忽略的是：label 的对齐效果从来不是它自己的事。浏览器不会因为写了 <label>用户名</label> 就自动居中——它只是安静地待在文档流里，等着父容器发号施令。所以检查父元素的 display 类型、text-align 值、是否有浮动或绝对定位干扰，比反复调试 label 样式更有效。