没有“一步到位”的居中，必须先判断元素类型和容器约束再选方案：行内内容用父容器text-align:center；块级元素水平居中需width+非flex/grid父容器；双向居中首选flex（display:flex+justify-content:center+align-items:center），且父容器须有明确高度。
直接说结论：没有“一步到位”的居中，必须先判断元素类型和容器约束，再选方案。最常翻车的是把 text-align: center 加在子元素上，或给 flex 容器加了 margin: 0 auto 却指望它起作用。
行内内容（文字、img、span）水平居中怎么写？
只用父容器加 text-align: center，别动子元素本身。
- 错误做法：
<div style="text-align: center"><p style="text-align: center">文字</p></div>——p是块级，自己设text-align没意义 - 正确写法：
<div style="text-align: center"> <span>文字</span><img src="a.png" alt="HTML容器内元素怎么居中对齐？简易布局步骤" > </div> - 注意：
img必须保持默认display: inline或inline-block；一旦加了display: block，就得换别的方法 - 垂直方向不管：单行可用
line-height配合height，多行建议改用 flex
块级元素（div、section）水平居中常见踩坑点
margin: 0 auto 看似简单，但三个条件缺一不可。
- 子元素必须有明确宽度：
width: 320px或max-width: 80%（不能是100%） - 父容器不能是
display: flex或display: grid—— 它们会接管 margin 行为 - 子元素不能是
position: absolute、float或display: inline - 常见失效现象：写了
margin: 0 auto没反应 → 先检查是否漏了width，再确认父容器 display 类型
需要水平 + 垂直双向居中时，为什么 flex 最稳？
因为不依赖子元素尺寸，也不要求你算偏移量，但父容器高度必须可计算。
DeepBI DHTML 页面生成器
下载
生成可在 deepbi 沙箱 iframe 内运行或作为独立文件运行的交互式 HTML 页面，使用 `window.deepbi` JS SDK 实现数据查询、空间管理、文件浏览及用户操作。当用户提出以下需求时启用该能力： - 创建 KPI 仪表盘、数据表格、文件浏览器、成员列表、管理页面； - 明确要求“转成 dhtml”、“转译成 HTML”、“把 XX 页面转成……”、“控制台页面”、“管理后台”、“DeepBI 页面迁移”； - 提及位于 `apps/console/src/featur
立即学习“前端免费学习笔记（深入）”；
- 关键三行：
display: flex+justify-content: center+align-items: center - 父容器必须有高度来源：比如
min-height: 100vh、height: 400px，或被内容撑开 - 别在
body上直接加display: flex—— 它会让所有直系子元素变成 flex item，破坏原有结构 - 兼容性：IE10+ 支持，IE9 及以下需降级为
position: absolute+transform: translate(-50%, -50%)
place-items: center 能不能无脑用？
能，但只推荐现代项目且无需兼容 IE11 及更旧浏览器的场景。
- 一行代码等效于
justify-items: center; align-items: center，必须配合display: grid - 父容器同样需要高度支撑，比如
min-height: 100vh - 旧 Android WebView（4.4 及以下）不支持，iOS Safari 10.3+ 才稳定
- 别和
flex混用：一个容器别同时设display: flex和display: grid
真正容易被忽略的，是父容器的高度塌陷问题——无论用哪种方案，只要父容器高度为 0（比如空 div 或没设 min-height），align-items: center 和 place-items: center 就完全失效，看起来像“没居中”，其实是没空间可居中。
