text-align: center 仅对行内内容有效，无法使块级div居中；需用 margin: 0 auto（配合明确width）或flex/grid的justify-content/ place-items。
为什么 text-align: center 不让 div 居中
因为 text-align 只控制**行内内容**（如文字、span、img）在块级容器中的水平对齐，它对块级子元素（如另一个 div）完全无效。很多人写 text-align: center 后发现内部的 div 没动，就是卡在这儿。
要让块级元素自身居中，必须让它“知道”自己有宽度，并靠外边距自动分配空间：
-
margin: 0 auto是最直接解法，但前提是该div有明确width（或max-width），且display是block（默认值） - 如果父容器是
flex或grid，text-align就彻底无关——此时该用justify-content: center或place-items: center - 注意：
margin: auto在flex子项上会失效，浏览器忽略它；grid子项同理
vertical-align: middle 为什么总没反应
vertical-align 只对 display: inline、inline-block、table-cell 和 flex/grid 项生效。把它写在 div 上却没效果，大概率是因为这个 div 还是 block 显示模式。
常见误用场景：
立即学习“前端免费学习笔记（深入）”；
生成可在 deepbi 沙箱 iframe 内运行或作为独立文件运行的交互式 HTML 页面，使用 `window.deepbi` JS SDK 实现数据查询、空间管理、文件浏览及用户操作。当用户提出以下需求时启用该能力： - 创建 KPI 仪表盘、数据表格、文件浏览器、成员列表、管理页面； - 明确要求“转成 dhtml”、“转译成 HTML”、“把 XX 页面转成……”、“控制台页面”、“管理后台”、“DeepBI 页面迁移”； - 提及位于 `apps/console/src/featur
- 在表格单元格里设了
vertical-align: middle，但忘了给td加display: table-cell（其实默认就是，除非被覆盖） - 想让图标和文字垂直居中，却把
vertical-align加在包裹它们的div上——应该加在图标img或span自身上，且确保它和文字在同一行流中 - 用
line-height匹配容器高度来“模拟”居中时，若文字换行，line-height就失效了；这时应改用flex或grid
Flexbox 对齐后子元素错位或溢出
Flex 容器的 align-items 和 justify-content 看似简单，但子元素一旦有 margin、padding、border 或 min-width，就容易打破预期布局。
实操要点：
-
align-items: center垂直居中时，若子元素设置了height且小于容器，它会居中；但如果子元素内容撑高了，它就变成“顶部对齐”——因为align-items对齐的是**轴线方向上的交叉轴起点**，不是内容中心 - 子元素用
margin: auto可以强制在主轴/交叉轴上居中（比如单个按钮在 flex 容器里绝对居中），但只对一个子元素有效；多个子元素时会相互挤压 - 避免在 flex 子项上同时设
flex: 1和固定width，浏览器优先级不一致，可能造成宽度计算冲突，尤其在小屏下溢出
Grid 中 justify-self / align-self 失效的典型原因
justify-self 和 align-self 是网格项（grid item）自己的对齐控制，但它依赖两个前提：父容器必须是 display: grid，且该子项**不能被其他对齐属性覆盖**。
容易忽略的细节：
- 父容器用了
place-items: center，它会同时设置justify-items和align-items，这两个属性会**向下继承**，覆盖掉子项的justify-self/align-self - 子项本身是
display: contents，那它就不是真正的网格项，justify-self直接被忽略 - 子项跨了多行或多列（如
grid-row: 1 / 3），align-self仍有效，但只在它所占的轨道范围内起作用；如果轨道高度为auto，那“居中”就只是相对于内容高度，视觉上可能看不出变化
对齐问题最难缠的地方往往不在声明本身，而在盒模型叠加、继承链干扰和 display 模式切换。调试时先确认元素真实 display 值（用 DevTools 的 Computed 面板看），再一层层检查父级对齐设置是否在默默覆盖子项行为。
