label 默认不居中，需用 CSS 的 text-align: center 实现文字居中，配合 display: block 确保生效；整体居中应使用父容器 flex 布局并设 justify-content: center，同时注意垂直对齐问题。

label 元素默认没有居中效果，它只是个语义化容器，不带任何样式。想让文字居中，必须用 CSS 控制，不能靠 HTML 属性（比如 align="center" 在现代 HTML 中已废弃，且对 label 无效）。

直接给 label 设置 text-align: center

这是最常用、最可靠的方式，适用于绝大多数场景：

• label 是行内元素，但 text-align 对其内部文字生效，无需改 display
• 只需确保 label 有足够宽度（比如父容器是块级或设置了 width），否则“居中”没参照系
• 避免误加 margin: 0 auto —— 这对行内元素无效，除非先设 display: block 或 inline-block

示例：

<label for="email">邮箱地址</label>
<input type="email" id="email">

CSS：

label {
  display: block;
  text-align: center;
  margin-bottom: 8px;
}

用 flex 布局让 label 和 input 整体居中

当你要的是整个表单控件（label + input）在页面或容器中水平居中时，别只动 label，而是控制其父容器：

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

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

下载

• 给包裹 label 和 input 的 div 或 form 加 display: flex + justify-content: center
• 此时 label 内部仍需 text-align: center 才能保证文字自身居中（否则可能左对齐）
• 注意：如果父容器宽度不够，flex 居中会失效；移动端要检查是否被 viewport 缩放影响

常见错误：只设 justify-content: center 却忘了 flex-direction: column，导致 label 和 input 水平排成一行再居中，不符合表单习惯。

避免用 align 属性或过时写法

以下写法要么无效，要么已被标准弃用，实际项目中应避开：

• 用户名 —— align 不是 label 的合法属性，浏览器忽略
• 用户名 —— 标签已从 HTML5 移除，不推荐，且语义错误
• 仅靠 margin: 0 auto 给 label —— 行内元素不响应这个声明，必须配合 display: block 或 inline-block

真正起作用的永远是 CSS 的 text-align、display 和布局上下文（如 flex/grid 容器）三者配合。

最容易被忽略的一点：label 文字居中后，如果它关联的控件（比如 input[type="checkbox"]）紧挨着文字，那控件本身不会跟着居中——它的位置由自身 display 和父容器的 align-items 或 vertical-align 决定。需要单独处理垂直对齐，否则看起来“错位”。

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