label文本水平居中用text-align: center，但整体居中需margin: 0 auto（设宽度）或flex父容器justify-content: center；与input并排时须统一vertical-align或用flex align-items: center。

label文本居中只认text-align: center

给label加text-align: center就能让里面那行字水平居中——它不改变label自身在页面中的位置，只管内部文字排布。别用align="center"，HTML5 已废弃，Chrome 和 Firefox 渲染不一致，W3C 验证器直接报错。

• label默认是块级元素，所以text-align天然生效，无需额外设display
• 如果label被包在div里，而那个div用了display: flex或display: grid，text-align会失效，得改用justify-content: center或place-items: center
• 若label是行内场景（比如和input并排），必须先设display: inline-block，否则text-align不作用于它自身（它得是“能承载文字的容器”，不是“文字本身”）

label整体居中要靠margin: 0 auto或flex

想让整个label框在父容器里水平居中，就不能只靠text-align——得让它有明确宽度，再配margin: 0 auto。但注意：label默认宽度由内容撑开，没设width时margin: 0 auto无效。

• 写法示例：用户名
• 更推荐用flex包裹：父容器设display: flex; justify-content: center，label保持默认行为即可
• 避免给label加float再清浮动——响应式下易塌陷，现代项目已淘汰

和input并排时，label文本居中容易错位

常见现象是label文字看似居中了，但和右边input视觉上不对齐。这不是label的问题，而是两者基线（baseline）默认不一致：label按文字底边对齐，input按框体中间偏下对齐。

Convert Markdown To HTML And PDF - Markdown和HTML、PDF互转

实现 Markdown↔ HTML 互转，支持导出 PDF，用于用户请求的文档格式转换。

下载

• 最稳解法：把label和input包进一个div，设display: flex; align-items: center
• 若坚持用inline流，必须同时设label { display: inline-block; vertical-align: middle; }和input { vertical-align: middle; }，缺一不可
• iOS Safari 对label点击热区有偏差，建议加cursor: pointer和min-height: 1.2em保体验

表格里label文本居中要单独控制单元格

在table中放label，不能只给table或tr设text-align: center——它不穿透到td内部。必须作用在td或label自己身上。

• 统一控制整列：td:first-child label { text-align: center; }
• 单个控制：状态
• 如果td里还有其他内容（比如按钮），用text-align会连带影响它们；此时应把label单独包一层div，再对该div设居中

真正难的不是“怎么加居中”，而是label常被嵌套在各种上下文中——flex、grid、表单行、表格单元格……每种父容器对text-align的支持逻辑都不同，稍不注意就失效。

前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！