Flex水平垂直居中需父容器设display:flex+明确高度，再用justify-content:center和align-items:center；避免脱离文档流属性，注意软键盘压缩及子元素干扰。
在 H5 页面中用 Flex 实现水平垂直居中，核心是让父容器成为弹性盒子，并控制好主轴和交叉轴的对齐方式——关键不在子元素加样式，而在父容器是否具备有效空间和正确声明。
父容器必须设 display: flex + 明确高度
只写 display: flex 不够，父容器得“有形”才能撑起居中逻辑：
- 必须设置
height或min-height（如min-height: 44px适配 iOS 导航栏，或height: 100vh占满视口） - 避免用
float、position: absolute等会脱离文档流的属性，否则 Flex 行为失效 - 若父容器是
或顶层<header></header>，需留意微信 WebView 下100vh被软键盘压缩的问题
两行代码搞定对齐：justify-content + align-items
水平居中靠主轴，垂直居中靠交叉轴，两者配合即可：
DeepBI DHTML 页面生成器
下载
生成可在 deepbi 沙箱 iframe 内运行或作为独立文件运行的交互式 HTML 页面，使用 `window.deepbi` JS SDK 实现数据查询、空间管理、文件浏览及用户操作。当用户提出以下需求时启用该能力： - 创建 KPI 仪表盘、数据表格、文件浏览器、成员列表、管理页面； - 明确要求“转成 dhtml”、“转译成 HTML”、“把 XX 页面转成……”、“控制台页面”、“管理后台”、“DeepBI 页面迁移”； - 提及位于 `apps/console/src/featur
-
justify-content: center—— 控制子元素在主轴（默认水平方向）居中 -
align-items: center—— 控制子元素在交叉轴（默认垂直方向）居中 - 如果子元素是多行文本（比如换行的
<h1></h1>），align-items: center可能造成上下留白不均，此时建议改用line-height配合单行限制更稳妥
更轻量的替代方案：按场景选
不是所有情况都非用 Flex 不可：
- 纯单行标题水平居中 → 直接给父容器加
text-align: center，零成本、不依赖高度、不受 viewport 变化干扰 - 父容器内还有图标、按钮等其他元素 →
text-align会让它们也居中，此时需用position: absolute或float单独定位辅助元素 - 需要兼容极低版本安卓内核 → 可回退到绝对定位：
position: relative+ 子元素position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%)
常见踩坑点
这些细节一错，居中就“看起来没生效”：
- 父容器没设高度，
justify-content: center有空间但没“高度空间”，视觉上仍靠上 - 子元素自身有
margin或过大的line-height，干扰了align-items: center的计算基准 - 误在子元素上写
display: flex，实际应作用于其直接父容器 - 用
flex-direction: column后未同步调整justify-content和align-items的作用方向
