text-align: center仅对块级容器内的行内内容生效，不能使块级子元素自身居中；需用margin: 0 auto（配宽度）、flex布局或absolute+transform等方案。
别找“通用对齐方案”——HTML里没有哪种对齐方式能覆盖所有场景，选错不是报错，而是元素完全不动或错位到离谱。
text-align: center 为什么对 div 不起作用
它只控制块级容器内部的行内内容对齐，不移动子元素本身。给 .parent 加 text-align: center，里面的 <div class="child"> 依然贴左，因为 <code>div 是块级，不受影响。
- 生效对象：文字、
<span></span>、<img alt="HTML元素对齐模式的选择教程" >（默认 inline）、按钮内文字 - 失效条件：子元素是
display: block；父容器是display: flex或display: grid；子元素用了float或position: absolute - 典型误用：
<div style="text-align:center"><div>我不会居中</div></div>
margin: 0 auto 居中失败的三个硬性条件
这是唯一真正“让块级元素自身水平居中”的传统方式，但浏览器必须能算出左右 margin 各该分多少，缺一不可。
- 目标元素必须有明确宽度：
width: 300px、max-width: 80%可以，width: 100%或未声明 width 就不行 - 元素必须是块级：
<img alt="HTML元素对齐模式的选择教程" >得先加display: block；<span></span>得加display: block或改用<div> <li>父容器不能是 <code>display: flex或display: grid——它们会静默覆盖margin: auto行为 - 子元素设了
width: 100%？它仍会撑满父容器，justify-content完全不起作用 -
float、vertical-align、margin: auto全部被忽略 - 老版 iOS Safari（iOS 9.3 之前）对
justify-content: center在图片或带vertical-align的元素上支持不稳，容易偏移 - 要兼容旧环境，可加
align-items: flex-start显式重置交叉轴行为 - 子元素必须设
position: absolute，且top: 50%、left: 50% - 父元素必须有
position: relative（或absolute/fixed），否则top/left会相对于视口计算 -
transform: translate(-50%, -50%)是关键——它把元素自身宽高的一半“挪回去”，纯靠数值，不依赖尺寸是否已知 - 滚动时若父容器没设
position: relative，元素会脱离预期位置
flex 布局中 justify-content: center 的副作用
它确实省心，但会彻底改变父容器的布局上下文，所有直系子元素自动变成 Flex 项目，原有对齐逻辑全部失效。
DeepBI DHTML 页面生成器
下载
生成可在 deepbi 沙箱 iframe 内运行或作为独立文件运行的交互式 HTML 页面，使用 `window.deepbi` JS SDK 实现数据查询、空间管理、文件浏览及用户操作。当用户提出以下需求时启用该能力： - 创建 KPI 仪表盘、数据表格、文件浏览器、成员列表、管理页面； - 明确要求“转成 dhtml”、“转译成 HTML”、“把 XX 页面转成……”、“控制台页面”、“管理后台”、“DeepBI 页面迁移”； - 提及位于 `apps/console/src/featur
立即学习“前端免费学习笔记（深入）”；
绝对定位居中时 transform: translate(-50%, -50%) 的依赖链
这个组合看起来“精准”，但它是一条脆弱的依赖链：每个环节断掉，居中就失效。
最常被忽略的是：对齐方式的选择本质上是在权衡“控制粒度”和“上下文污染”。text-align 最轻量但最受限；margin: auto 稳定但要求多；flex 最灵活却会重写整个父容器的行为；absolute+transform 最精确但绑定定位上下文。选哪个，得看你要动的是内容、盒子，还是整个布局流。
