text-align: center 对块级元素本身无效，仅作用于其内部行内或行内块内容；使 div 居中需用 margin: 0 auto（需固定宽度且非浮动/定位）、flex 布局（display: flex; justify-content: center; align-items: center）等其他方法。
text-align: center 对块级元素本身无效，只影响其内部的行内内容；想让一个 div 居中，得用别的办法。
text-align 只对行内内容起作用
它必须写在父容器上，且只对子元素中是 inline 或 inline-block 的内容生效——比如文字、span、未设 display: block 的 img。
- 给父
div加text-align: center，里面一段文字会居中，但一个子div（默认display: block）依然贴左 - 如果子
div被设了float或position: absolute，text-align完全失效 - 邮件客户端可能仍识别旧的
align="center"属性，但现代网页开发中应避免使用
margin: 0 auto 要满足三个前提
这是最常用也最容易翻车的方式。它不是“加了就居中”，而是依赖浏览器的自动计算逻辑。
- 目标元素必须是块级（或显式设
display: block） - 必须有明确宽度：
width值不能是auto、100%或fit-content（Safari 15.4 前需前缀） - 不能同时存在
float、position: absolute/fixed，否则margin: auto失效 - 常见坑：
width: max-content看似安全，但会按最长子元素撑开，可能突破容器
Flex 布局居中要防老 Safari 错位
display: flex + justify-content: center 看似一劳永逸，但在 iOS 9.3 之前的 Safari 中，单行 Flex 容器里放图片或带 vertical-align 的内联元素时，justify-content: center 会偏移。
生成可在 deepbi 沙箱 iframe 内运行或作为独立文件运行的交互式 HTML 页面，使用 `window.deepbi` JS SDK 实现数据查询、空间管理、文件浏览及用户操作。当用户提出以下需求时启用该能力： - 创建 KPI 仪表盘、数据表格、文件浏览器、成员列表、管理页面； - 明确要求“转成 dhtml”、“转译成 HTML”、“把 XX 页面转成……”、“控制台页面”、“管理后台”、“DeepBI 页面迁移”； - 提及位于 `apps/console/src/featur
- 稳妥做法：加上
align-items: flex-start显式重置交叉轴行为 - 若父容器高度没撑开（比如只有
min-height），子元素可能“看不见”居中效果 - 不推荐为兼容老设备退回到
display: table-cell方案——语义混乱、调试困难
滚动条会让 margin: 0 auto 看起来“不对齐”
当两个同宽同 margin: 0 auto 的元素，一个在父容器内出现滚动条、另一个没有，它们视觉上就错开了——因为滚动条占用了约 12–17px 宽度，压缩了实际渲染区域。
- 根本解法：把
overflow-y: auto下放到需要滚动的**最内层容器**，而不是父级 - 配合
box-sizing: border-box，确保 padding 和 border 不额外增加宽度 - 别用 JS 动态测滚动条宽度再补偿 margin——不同系统、缩放、暗色模式下值不稳定
真正难的不是选哪种方法，而是判断当前元素的 display 类型、是否脱离流、父容器有没有隐式限制，以及目标浏览器的真实行为——这些细节漏掉一个，居中就可能失效。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
