label文字居中需设display:inline-block/block+width+text-align:center；label元素居中需块级+width+margin:0 auto或父容器flex+justify-content:center。
label 本身不能“居中”，得看你想居中什么
很多人搜“label 居中”，但没说清是：让 label 文字在它自己的盒子里居中？还是让整个 label 元素在页面/父容器里水平居中？这两者 CSS 写法完全不同，混用就失效。
关键判断点：text-align: center 只影响 label 内部文字（或行内子元素），margin: 0 auto 或 justify-content: center 才控制 label 元素自身的位置。
让 label 里的文字水平居中（最常用）
这是多数人真正需要的：label 标签内文字（如“用户名”）在其宽度范围内居中显示。
- 必须把
text-align: center写在元素自身上，不是它的父容器 - label 默认是 inline 元素，所以要先加
display: inline-block或display: block，否则 width 和 text-align 都不生效 - 记得设宽度（
width或min-width），不然文字会撑满整行，看不出“居中”效果
示例：
<label style="display: inline-block; width: 120px; text-align: center;">用户名</label>
让整个 label 元素在父容器中水平居中
比如表单顶部一个独立的标题式 label，想让它在 里居中摆正。
Convert Markdown To HTML And PDF - Markdown和HTML、PDF互转
下载
实现 Markdown↔ HTML 互转，支持导出 PDF，用于用户请求的文档格式转换。
- label 得是块级（
display: block）或 flex 子项，才能响应margin: 0 auto - 必须设明确宽度（
width），width: 100%或不设 width 都会让margin: 0 auto失效 - 如果父容器是
display: flex，margin: 0 auto会被忽略，得改用父容器的justify-content: center
两种写法都有效：
<label style="display: block; width: 200px; margin: 0 auto;">用户信息</label>
<div style="display: flex; justify-content: center;"><label>用户信息</label></div>
和 input 并排时 label 怎么对齐才不歪
单独调 label 居中没用——它和 input 是两个独立元素，基线（baseline）天然不同。强行给 label 加 text-align: center 只会让文字在 label 盒子里居中，但 label 和 input 整体仍错位。
- 正确做法是把每组
包进一个容器，设display: flex; align-items: center - label 加
flex: 0 0 100px固定宽度，再配text-align: right实现“右对齐文字+左对齐输入框”的经典表单效果 - 避免只给 label 设
vertical-align: middle：input 也得同步设，且只在 inline/inline-block 场景下才起作用，flex 下完全无效
容易被忽略的一点：iOS Safari 对 的点击热区识别偏上，建议加 cursor: pointer 和 min-height: 1.2em 保体验。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
