label居中需分场景：文字居中需设display:block+text-align:center；label与input垂直对齐推荐flex布局；整表单居中须用min-height:100vh的wrapper包裹。

label 本身不能“居中”，得看它在哪个上下文中对齐

HTML 的 label 是行内元素，默认没有宽度、不响应 margin: 0 auto，直接给它加 text-align: center 或 margin: auto 完全无效。所谓“label 居中”，实际只有两种常见需求：label 文字在自身盒子里水平居中（比如单个 label 单独显示），或label 和 input 整体在表单里垂直/水平居中（这才是登录页最常卡住的地方）。

label 文字水平居中：只需 text-align + display

如果 label 是独立展示（如标题式提示），想让里面文字居中，必须让它变成能响应 text-align 的容器：

• 给 label 加 display: block 或 display: inline-block
• 再加 text-align: center
• 若用了 inline-block，记得设 width 或 min-width，否则宽度由文字撑开，看起来还是“左对齐”

错误写法：label { text-align: center; } → 无效果，因为 label 默认是 inline，text-align 不作用于自己。

label 和 input 垂直对齐：flex 是唯一稳解

登录框里最典型的错位——label 看起来“飘在 input 上方”，不是 margin 没调好，而是浏览器按 baseline 对齐，而两者的基线位置天然不同。靠 vertical-align 补丁容易在 iOS Safari 或缩放时翻车。

DeepBI DHTML 页面生成器

生成可在 deepbi 沙箱 iframe 内运行或作为独立文件运行的交互式 HTML 页面，使用 `window.deepbi` JS SDK 实现数据查询、空间管理、文件浏览及用户操作。当用户提出以下需求时启用该能力： - 创建 KPI 仪表盘、数据表格、文件浏览器、成员列表、管理页面； - 明确要求“转成 dhtml”、“转译成 HTML”、“把 XX 页面转成……”、“控制台页面”、“管理后台”、“DeepBI 页面迁移”； - 提及位于 `apps/console/src/featur

下载

立即学习“前端免费学习笔记（深入）”；

• 把每组 label + input 包进一个 <div class="form-row"> <li><code>.form-row { display: flex; align-items: center; gap: 0.5em; }
• label { flex: 0 0 100px; text-align: right; }（固定宽度+右对齐，避免换行挤压）
• input { flex: 1; min-width: 0; }（自适应，且防小屏溢出）

别用 float 或 inline-block + vertical-align 组合：一旦父容器有 line-height 或字体变化，对齐立刻偏移。

整个登录表单在页面中居中：别动 body，包一层 wrapper

很多人试 body { display: flex; justify-content: center; align-items: center; }，结果全局布局崩了——body 下所有块级元素都会被 flex 流接管，导航栏、页脚全乱。

• 加一个包裹层：<div class="login-wrapper"><form>...</form></div>
• .login-wrapper { min-height: 100vh; display: flex; justify-content: center; align-items: center; }
• form { max-width: 400px; width: 100%; }（防大屏过宽）

漏掉 min-height: 100vh 是最高频失误：父容器高度为 auto，align-items: center 就失去垂直空间，表单只会水平居中、卡在顶部。