图片居中失效主因是隐性条件未满足：text-align:center需父容器有确定宽度且图片为inline；margin:0 auto需图片为block并有明确width；flex居中需父容器设display:flex及高度。
图片加了 text-align: center 或 margin: 0 auto 却没居中？大概率不是 CSS 写错了，而是某个隐性条件没满足——比如父容器塌陷、图片未转块级、或 flex 容器缺高度。
为什么 text-align: center 看似写了却没反应
它只作用于父容器，且只影响其内部的行内级内容。图片默认是 inline，所以多数时候它确实管用；但以下情况会直接让它“失能”：
- 父容器本身被设了
float、position: absolute或display: inline-block，导致宽度不可预测或脱离文档流 - 父容器里混了
<div>这类块级子元素，它们不受text-align影响，可能把图片视觉上挤偏 - 父容器没设宽度（比如只靠内容撑开），而图片又用了
max-width: 100%，此时浏览器按整个视口算宽度，居中参照系就错了 - 你把
text-align: center写在了<img>标签上——完全无效，它不作用于自身
margin: 0 auto 失效的三个硬门槛
这个组合只解决水平居中，且必须同时满足：
-
<img>必须是块级：显式加display: block（默认inline下margin: auto被忽略） - 图片得有可计算的宽度：用
width: 300px可行，但width: 100%或max-width: 100%不行——浏览器无法推导“剩余空间”，左右 margin 就变成 0 - 父容器不能是
display: flex或display: grid，否则 margin 行为被布局模型接管，自动失效
常见翻车：<img src="x.jpg" style="display: block; max-width: 100%; margin: 0 auto;"> → 图片仍靠左，因为 max-width 不提供确定宽度。
立即学习“前端免费学习笔记（深入）”；
Flex 居中写了却贴顶？检查这三处
justify-content: center 和 align-items: center 都得写在父容器上，不是 <img> 自身。失效主因是：
- 父容器没设
display: flex—— 光给图片加没用 - 父容器高度塌陷：比如只写了
width: 100%，没设height、min-height或aspect-ratio，交叉轴（垂直方向）长度为 0，“垂直居中”无从谈起 - 图片加了
position: absolute或float—— 元素已脱离文档流，flex 规则自动跳过
最小可靠闭环：<div style="display: flex; justify-content: center; align-items: center; min-height: 300px;"><img src="x.jpg" style="max-width: 90vw; height: auto;"></div>
响应式居中真正要协同控制的点
居中只是表象，背后是尺寸、容器上下文、渲染流三者咬合。最容易被忽略的是：
- 父容器是否设置了
max-width（如max-width: 1200px）并配margin: 0 auto—— 否则小屏下图片按全视口缩放，看着像“居中失败”，其实是参照系错了 - viewport 标签是否生效：
<meta name="viewport" content="width=device-width, initial-scale=1.0">必须在<head>顶部，拼错或漏掉都会让所有响应式逻辑错乱 - 媒体查询不该重复定义图片尺寸，而应切换父容器的对齐方式：
@media (max-width: 768px) { .img-container { text-align: center; } }比每个断点都重写img { width: 100% }更干净、不易冲突
