label文字居中需依托稳定布局上下文，仅text-align:center无效；必须用flex包裹label与input并设align-items:center，再单独text-align:center，辅以min-width防压缩，才能实现真正一致的视觉居中。
label 文字居中本身很简单，但真正在表单里“看起来居中”且“不破坏整体对齐”，关键不在 text-align: center 本身，而在于它所处的布局上下文是否稳定。
label 文字居中 ≠ 表单整体对齐
直接给 label 加 text-align: center 只能控制其内部文字居中，但若它和 input 处在不同行高、不同基线、不同 display 模式的容器里，视觉上仍会“飘”——比如 label 看似居中了，input 却往下沉了一像素。常见现象包括：
- Chrome 下 label 文字居中了，但 input 框底边比 label 底线低
- 移动端缩放后 label 和 input 垂直错位加剧
- 加了
margin-top临时修正，换一个字体或字号又失效
根本问题不是文字没居中，而是 label 和它配对的控件没在同一个对齐基准上。
用 flex 包裹 label + input 再设 text-align:center
这是目前最可控的做法：先让 label 和 input 在同一 flex 行内垂直居中，再单独控制 label 文字居中。不需要 hack，也不依赖浏览器默认基线。
把任意文章或文档内容转换成精美的全屏翻页 HTML 演示文件（幻灯片风格）。当用户发来一篇文章、文档链接、Markdown 内容、或粘贴的文本，并且希望生成演示用的 HTML 时触发。支持任意内容来源：iWiki 链接、KM 链接、本地文件路径、直接粘贴的文本。生成的 HTML 文件保存到本地工作区，并通过企微直接发送给用户。触发词示例：帮我把这篇文章做成PPT、转成演示文档、生成HTML幻灯片、做个演示、转成可以演示的格式、article to deck、make a slide。
立即学习“前端免费学习笔记（深入）”；
HTML 结构保持语义清晰：
<div class="form-item"> <label for="email">邮箱地址</label> <input type="email" id="email" name="email"> </div>
CSS 关键点：
.form-item { display: flex; align-items: center; gap: 0.5rem; }-
label { text-align: center; width: 100%; min-width: 80px; }（min-width防止短文字被压缩变形） -
input { flex: 1; margin: 0; }（避免默认外边距干扰）
注意：不要给 label 设 display: block 后又忘记重置 margin-bottom，否则会多出意外空白，破坏 align-items: center 效果。
别用 table 布局强行“视觉居中”
有人把 label 和 input 塞进 <td align="center">，看似文字居中了，实则埋下三个隐患：
<ul>
<li>
<code>vertical-align 在表格单元格里行为不可靠，尤其 iOS Safari 对 table-layout: auto 的宽度计算会失准
<table> 不代表表单结构，影响屏幕阅读器识别和 SEO
<p>如果必须兼容 IE11，用 flex fallback 即可，没必要倒退回 table。</p>
<h3>动态内容场景要防文字撑开导致错位</h3>
<p>当 <code>label 文字是 JS 动态生成的（例如带输入值的提示：“用户名：张三”），长度变化可能撑开容器，破坏原有居中效果。此时需锁定宽度：
- 用
min-width+max-width限制 label 宽度范围 - 配合
white-space: nowrap; overflow: hidden; text-overflow: ellipsis;防溢出 - 避免用
width: 100%在 flex item 上，除非父容器宽度绝对固定
真正难的不是“让文字居中”，而是“在各种字体、字号、缩放、输入状态变化下，始终让 label 文字和它对应的控件保持一致的视觉重心”。flex + text-align: center 是目前最接近“一劳永逸”的组合，但前提是 label 和 input 必须同级包裹，不能跨层或脱离共同容器。
