label在dialog中默认不居中，需用CSS控制：若为直接子元素则给dialog设text-align:center；若与input并排，应包裹在flex容器中并设置justify-content:center。

HTML 对话框（如

）里的 默认不会居中，它只是普通行内元素，行为和在其他容器里完全一致——居中必须靠 CSS 显式控制，不是对话框自带的特性。

label 在 dialog 内水平居中（文本内容居中）

这是最常见需求：让 label 里的文字在 dialog 内水平居中。本质是让 label 作为行内元素，在其父容器中居中，所以直接对 dialog 或它的直接包裹容器设 text-align: center 即可。

• 如果 是 dialog 的直接子元素：
  用户名
  ，给
  加 text-align: center
• 如果 label 被
  或

  包裹，就对该父容器设 text-align: center，而不是 label 自身
• 不要给 自己加 display: block 后再设 margin: 0 auto —— 多余且易出错，text-align 更直接

label 和 input 并排时整体居中（表单行居中）

实际对话框中，label 很少单独存在，常和 组成一行。此时“居中”指的是整行（label + input）在 dialog 内水平居中，同时 label 和 input 之间还要对齐。


DeepBI DHTML 页面生成器
生成可在 deepbi 沙箱 iframe 内运行或作为独立文件运行的交互式 HTML 页面，使用 `window.deepbi` JS SDK 实现数据查询、空间管理、文件浏览及用户操作。当用户提出以下需求时启用该能力： - 创建 KPI 仪表盘、数据表格、文件浏览器、成员列表、管理页面； - 明确要求“转成 dhtml”、“转译成 HTML”、“把 XX 页面转成……”、“控制台页面”、“管理后台”、“DeepBI 页面迁移”； - 提及位于 `apps/console/src/featur
下载
• 把每组 + 包进一个
• 给 .form-row 设 display: flex; justify-content: center; align-items: center;
• 为避免 label 换行或挤压，建议固定其宽度：flex: 0 0 80px；input 填充剩余：flex: 1
• 不推荐用 text-align: center 套整个 form —— 它会让 input 也变居中，破坏 label/input 左右结构

dialog 元素自身在视口居中（常被混淆的点）

很多人以为 “label 居中” 是因为 dialog 弹出来就在屏幕中间，其实那是

自身的定位行为。浏览器默认用 position: absolute + transform: translate(-50%, -50%) 实现居中，但这个居中不传递给内部子元素。
• 默认居中只保证其外框在视口中央，内部所有子元素仍按普通文档流或 CSS 规则渲染
• 如果你发现 label 偏左/偏上，不是 dialog 没居中，而是内部没做对齐控制
• 不要给 dialog 加 display: flex 然后指望所有子元素自动居中 —— 它会把所有子元素拉成一行，破坏语义结构

真正容易忽略的是：label 的对齐方式取决于它所在的布局上下文，而不是它出现在哪个标签里。哪怕在

、
或
中，只要父容器没设 text-align 或 flex 控制，label 就老老实实左对齐。别指望语义化标签自带样式魔法。