align-items: center 未生效主因是父容器无明确高度或未触发BFC；需设height/min-height、避免浮动截断；absolute居中须配transform；table中vertical-align仅对内联内容有效；iOS下vh抖动可用dvh或absolute替代。

flex 布局里 align-items: center 为什么没生效

常见原因是父容器没设 height 或没触发 BFC，导致子元素“无处可居中”。flex 垂直居中依赖父容器有明确高度（比如 height: 100vh）或内容撑开高度；如果父容器高度为 auto 且子元素又没给高度，align-items: center 看起来就像没反应。

实操建议：

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

DeepBI DHTML 页面生成器

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

下载

• 确认父容器设置了 display: flex 和明确的 height（如 min-height: 100vh 更稳妥）
• 避免父容器被 float、position: absolute 或 overflow: hidden 意外截断高度
• 如果子元素是单行文本，line-height 和 height 相等也能“伪居中”，但不推荐——它只对纯文本有效，且响应式下易错位

用 position: absolute + transform 居中时偏移量不准

典型错误是只写 top: 50% 却忘了配合 transform: translateY(-50%)。只靠 top: 50% 是把元素上边缘拉到父容器中间，不是整体居中。

实操建议：

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

• 必须成对使用：top: 50% + left: 50% + transform: translate(-50%, -50%)
• 父容器需有 position: relative（或 absolute/fixed），否则 absolute 会相对于 viewport 定位
• 这个方案兼容性好（IE9+），但要注意：若子元素宽高动态变化，transform 仍能正确居中，比 margin-top: -Xpx 更可靠

表格单元格里文字垂直居中失效

表格默认 vertical-align: middle 只对单元格内联内容（如文本、img）起作用，如果里面套了 div 且没设 display: table-cell，就会失效。

实操建议：

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

• 直接在 td 或 th 上加 vertical-align: middle（这是最简单有效的做法）
• 如果必须用 div 包裹内容，且不能改 HTML 结构，可给该 div 加 display: flex; align-items: center; height: 100%，但要确保父 td 有固定高度
• 注意：CSS Grid 或 Flex 布局替代表格时，vertical-align 完全无效，得换思路

移动端 Safari 里 flex 垂直居中偶尔抖动或偏移

部分 iOS 版本（尤其是 iOS 12–14）对 vh 单位解析不稳定，滚动时地址栏显隐会导致 100vh 实际值变化，从而让居中位置跳动。

实操建议：

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

• 避免直接用 height: 100vh，改用 min-height: 100vh 或 JS 动态设置 style.height = window.innerHeight + 'px'
• 更轻量的解法：用 height: 100dvh（dvh 是动态视口单位，iOS 16+ 支持，Android Chrome 100+ 也支持）
• 如果必须兼容老 iOS，优先选 position: absolute 方案——它不依赖父容器高度计算，抗抖动更强

实际项目里最容易被忽略的是：居中目标是否真的“需要垂直居中”。很多场景下，用 padding 或 line-height 模拟视觉居中更轻量，也更可控。别一上来就堆 flex 或 absolute。