弹窗中label居中需控制父容器布局：单个label用flex+justify-content:center；label+input并排时须用flex容器统一控制对齐，并设label固定宽、input flex:1及vertical-align:middle；兼容IE11需避免grid、慎用gap。
弹窗里的 label 居中，本质不是“让 label 自己居中”，而是控制它所在的布局上下文——多数情况下，直接给父容器设 display: flex + justify-content: center 就够了；但若 label 和 input 并排出现，就得按表单对齐逻辑处理，不能只动 label。
弹窗内单个 label 水平居中（比如标题型提示）
常见于模态框顶部提示语、确认弹窗的主文案等场景。此时 label 通常独立存在，不和输入框配对。
- 最简方案：给
label的父容器（如.modal-header）加display: flex和justify-content: center，不用管label自身的text-align - 避免用
text-align: center直接作用于label——如果父容器是inline或未设宽度，效果不可靠；更糟的是，某些弹窗框架（如 Bootstrap Modal）会把 header 设为display: block但没设width: 100%，导致text-align失效 - 若弹窗使用
position: absolute定位，且需绝对居中（非仅内容居中），则改用left: 50%+transform: translateX(-50%)，比margin: auto更稳妥
弹窗内 label + input 并排时的对齐（真实表单场景）
这是最容易出错的地方：你以为只是“label 居中”，其实用户看到的是整行字段错位——比如 label 右对齐、input 左对齐，中间空隙不均，或垂直方向一高一低。
把任意文章或文档内容转换成精美的全屏翻页 HTML 演示文件（幻灯片风格）。当用户发来一篇文章、文档链接、Markdown 内容、或粘贴的文本，并且希望生成演示用的 HTML 时触发。支持任意内容来源：iWiki 链接、KM 链接、本地文件路径、直接粘贴的文本。生成的 HTML 文件保存到本地工作区，并通过企微直接发送给用户。触发词示例：帮我把这篇文章做成PPT、转成演示文档、生成HTML幻灯片、做个演示、转成可以演示的格式、article to deck、make a slide。
- 必须把每组
label+input包进一个独立容器（如<div class="form-row">），再对该容器设 <code>display: flex+align-items: center -
label推荐用flex: 0 0 120px（固定宽度不伸缩），text-align: right+margin-right: 8px；input用flex: 1填满剩余空间 - 别漏掉
min-width: 0在input上——否则在窄弹窗里，长 placeholder 文字可能撑破容器，尤其 iOS Safari - Chrome 下看似对齐，实则
label基线偏高？统一加label, input, select { vertical-align: middle; }，但注意这行 CSS 必须写在 flex 容器之外，否则会被align-items覆盖 - 先检查弹窗 body 内层是否包裹了
<table> ——如果是，要么改框架配置关掉 table 封装，要么在 <code><td> 上设 <code>display: flex（IE11 支持display: flex，但不支持gap，得用margin替代） - IE11 不支持
grid，若你已在全局用 grid 做表单对齐，弹窗里必须单独写 flex fallback，不能指望 autoprefixer 加前缀解决 - 旧弹窗 JS 可能动态插入 DOM 后没触发样式重绘，遇到 label 突然右移或换行，试试在插入后调用
getComputedStyle(el).height强制重排
IE11 或旧版弹窗框架兼容问题
有些弹窗组件（如老版本 layer、artDialog）默认用 table 布局封装内容区，此时直接套 flex 会失效。
立即学习“前端免费学习笔记（深入）”；
真正难的不是“怎么写居中”，而是弹窗尺寸变化时对齐不崩——比如用户缩放页面、弹窗从 400px 宽拉到 800px，flex 和 grid 能稳住，而靠 float 或 inline-block + width 的方案大概率错位。别省那几行 CSS，该包的容器、该设的 min-width、该写的 fallback，一个都不能少。
