text-align: center 不会让块级元素自身居中，只影响其内部行内内容；对子div无效是因为它仅作用于行内级元素（如文字、span、默认inline的img），不改变块级子元素的盒模型位置。
text-align: center 不会让块级元素自身居中，只影响它内部的行内内容。
为什么 text-align: center 对子 div 无效
这是最常踩的坑：给父容器加 text-align: center，里面放一个 div，结果 div 还是贴左。因为 text-align 只控制行内级内容（文字、span、默认 inline 的 img）的对齐，不移动块级子元素的位置。
- 适用对象：父容器内的文字、
img（未设display: block）、button文字等 - 失效场景：
div、p、section等块级子元素不会被挪动 - 若想让
img被text-align居中，它必须保持默认display: inline或inline-block
margin: 0 auto 必须同时满足三个条件
这是最“老实”的水平居中方式，但浏览器只在所有条件到位时才执行居中计算。
- 目标元素必须是块级（
display: block，或原生块标签如div） - 必须声明明确的
width（如width: 320px、max-width: 80%），不能是width: 100%或未设宽度的auto - 父容器不能是
display: flex或display: grid——它们会静默接管margin: auto的行为，使其退化为普通外边距 - 目标元素不能有
float、position: absolute或position: fixed
display: flex + justify-content: center 的副作用要预判
它确实一行代码搞定水平居中，但父容器一旦变成 Flex 容器，整个子元素渲染逻辑就变了。
DeepBI DHTML 页面生成器
下载
生成可在 deepbi 沙箱 iframe 内运行或作为独立文件运行的交互式 HTML 页面，使用 `window.deepbi` JS SDK 实现数据查询、空间管理、文件浏览及用户操作。当用户提出以下需求时启用该能力： - 创建 KPI 仪表盘、数据表格、文件浏览器、成员列表、管理页面； - 明确要求“转成 dhtml”、“转译成 HTML”、“把 XX 页面转成……”、“控制台页面”、“管理后台”、“DeepBI 页面迁移”； - 提及位于 `apps/console/src/featur
立即学习“前端免费学习笔记（深入）”；
- 所有直系子元素自动成为 Flex 项目，
float、vertical-align、margin: auto全部失效 - 如果子元素本身是
width: 100%，它仍会撑满父容器，justify-content不起作用 - 旧版 iOS Safari（iOS 9.3 之前）对
justify-content: center在含图片的单行 Flex 中支持不稳定，容易偏移 - 若需兼容老设备，可加
align-items: flex-start显式关闭交叉轴基线干扰
position: absolute + transform: translate(-50%, -50%) 适合脱离文档流
模态框、加载遮罩、气泡提示这类不占位的元素，用这个组合最稳——它不依赖父宽，也不改变其他元素布局。
- 子元素必须设
position: absolute、top: 50%、left: 50% - 父容器必须提供定位上下文，即
position: relative（或absolute/fixed），否则top: 50%会相对于视口计算，滚动即偏移 -
transform: translate(-50%, -50%)是关键，它把元素自身宽高的一半“拉回来”，和尺寸是否已知无关 - 注意：该方案下，元素完全脱离文档流，后续兄弟元素会“无视”它的存在
真正难的不是选哪种方案，而是判断当前上下文是否允许你用某一种——比如父容器已经是 flex，再写 margin: 0 auto 就等于没写；又比如在邮件模板里，flex 几乎不可用，只能退回 table-cell 或内联样式。细节决定它动不动，而不是语法对不对。
