根本原因是父容器未设宽度或未清除浮动，导致img按行内元素默认行为紧贴左边界；margin在inline下有效，block需margin:0 auto居中；flex居中失效常因float脱离流或容器未设display:flex；移动端需检查viewport设置。
为什么
根本原因通常是父容器没设宽度或未清除浮动，导致 按照「行内元素默认行为」紧贴左边界渲染。浏览器不会因为你在 img 上写了 margin-left: 20px 就自动给它“让出空间”——如果父块没形成 BFC 或宽度约束，这个 margin 可能被忽略或塌陷。
常见触发场景：
– 父
是空的或只含
– 图片在浮动元素（
– 使用了
img，且没设 width/display– 图片在浮动元素（
float: left）后面，但没加 clear– 使用了
text-align: center 却误以为它对块级图片生效（其实只影响行内内容）
margin 和 position 哪个更适合调图像水平位置？
优先用 margin（简单、流式、可响应），除非要脱离文档流或做精确像素对齐。但要注意：
-
margin-left在display: inline（默认）下有效；设成block后必须配margin: 0 auto才能居中，单写margin-left会失效 -
position: relative+left能强行位移，但可能引发重叠、影响后续元素布局，调试时容易误判真实位置 -
position: absolute需要父容器有position: relative，否则会相对于 viewport 定位，极易“飞走”
示例：让图片在父容器中水平居中
立即学习“前端免费学习笔记（深入）”；
@@##@@
Flexbox 居中为啥有时还是偏左？
Flex 容器本身没问题，问题常出在子项或容器样式冲突上：
