父容器未设宽度或高度塌陷导致子元素靠左不居中，应优先检查父容器是否“撑起来”；若宽度为0、使用flex/grid、浮动未清除、或position异常，margin: 0 auto均会失效。
父容器没设 width 或高度塌陷
元素靠左不居中，第一反应不是调子元素，而是看父容器有没有“撑起来”。margin: 0 auto 需要左右有剩余空间可分，如果父容器宽度是 auto（比如空的 div 或浮动后未清除），它实际宽度为 0，子元素再写 margin: 0 auto 也无处可居中。
- 在 DevTools 的 Elements 面板里选中父容器，切到 Computed 标签，确认
width和height是否为预期值（比如600px或100vh） - 若父容器内只有浮动子元素，常见表现是高度坍缩为 0——临时加
overflow: hidden或display: flow-root看是否恢复；若恢复，说明需补 clearfix 或改用 flex - 移动端要注意
viewportmeta 标签缺失，会导致父容器宽度异常，页面整体缩放错乱
父容器 display 布局模式冲突
Flex 或 Grid 容器会接管子元素对齐逻辑，此时 margin: 0 auto、text-align: center 全部失效。不是代码错了，是规则被覆盖了。
- 检查父容器是否写了
display: flex或display: grid：如果是，子元素的居中必须用justify-content/place-items等对应属性，而不是靠 margin - 若父容器用了
float，它会脱离文档流，导致后续兄弟元素“上浮”，视觉上像子元素靠左——这时真正该修的是浮动清除，不是给子元素加margin-left -
position: absolute子元素若没配position: relative父容器，会相对于视口定位，滚动时飘走，看起来总在左上角
子元素 display 类型与居中方式错配
行内元素（span、a、图片默认状态）和块级元素（div、p）的居中机制完全不同，混用就白忙。
- 想让文字或图片水平居中？给**父容器**加
text-align: center，不是给图片自己加 - 想让
div居中？它必须是块级（默认就是），且显式设width，再配margin: 0 auto；设成display: inline-block后，得同步处理父容器的空白字符或加font-size: 0 -
table元素默认块级，但若加了align="center"或display: inline-table，它就变成行内级，margin: 0 auto失效
浏览器渲染细节干扰：margin 折叠与 line-height
有些“靠左”不是布局问题，是视觉错觉。比如表格单元格文字偏上、图片底部留白、多行文本不对齐，往往和盒模型计算有关。
-
vertical-align: middle对td生效，但前提是单元格有足够高度；若height设太小，文字会被 line-height 挤出中心——优先用padding控制留白，少硬设 height - 相邻块级元素的垂直
margin会折叠，导致上边距“消失”，让第一个元素贴顶——在 Computed 中看实际 margin 值，别信 Styles 面板写的原始值 - 图片作为行内元素，默认 baseline 对齐，底部会留一条空白；加
vertical-align: top或display: block即可消除
position、display、overflow 这几个属性，任何一个变了，整个居中逻辑就得重判。前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
