text-align: center只对块级父容器内的行内级子元素生效，不影响块级子元素自身位置；失效常见原因包括子元素为block、父容器float/absolute脱离文档流、或宽度塌缩。
直接用 display: flex + justify-content: center 就能快速水平居中，但“响应式居中”不是单靠一行 CSS 就能稳住的——关键在父容器是否提供可计算的上下文。
为什么 text-align: center 有时不生效？
它只对父容器生效，且只影响行内级子元素。图片默认是 inline，所以多数情况下它确实管用；但一旦父容器被设了 float、display: inline-block 或宽度塌缩（比如没设 width 且内容为空），text-align 就会“失焦”。
- 别给
<img>自己加text-align: center—— 完全无效 - 如果父容器里混了
<div> 这类块级子元素，它们不受影响，可能把图片挤偏 <li>响应式场景下，若父容器用了 <code>max-width却没配margin: 0 auto，自身就不居中，子图自然也偏 -
<img>必须是块级：显式加display: block - 必须有可计算的宽度：比如
width: 300px，或固有尺寸；max-width: 100%不行，浏览器无法算出“剩余空间” - 父容器不能是
flex或grid容器，否则margin行为会被覆盖 - 视口级居中推荐
height: 100vh；内容区居中建议用min-height（如min-height: 200px） - 别直接在
上设display: flex，会把所有直系子元素（如多个<p></p>）都变成 flex item，破坏原有流 - 旧 Android（4.4 及以下）需补
display: -webkit-flex和对应前缀 - 小屏居中：
@media (max-width: 768px) { .img-container { text-align: center; } } - 中屏左对齐：
@media (min-width: 769px) and (max-width: 1024px) { .img-container { text-align: left; } } - 若用 flex，把
text-align换成justify-content: flex-start等即可
margin: 0 auto 需要哪些硬条件？
这个组合常被误认为“万能居中”，其实它只解决水平方向，且有三个不可妥协的前提：
常见翻车：写了 margin: 0 auto 却忘了 display: block，图片纹丝不动。
Flex 布局实现响应式居中，为什么高度总塌？
justify-content: center 管水平，align-items: center 管垂直——但后者依赖父容器在交叉轴（通常是高度）上有明确尺寸。没有高度，就等于让浏览器“在 0px 高的空间里居中”，结果就是图片贴顶。
响应式对齐切换，别重复写图片尺寸
媒体查询的目标不是重定义 img { width: 100% }，而是控制对齐行为本身。图片尺寸靠 max-width 和 height: auto 一次搞定，对齐则由父容器的 text-align 或 justify-content 控制。
真正容易被忽略的是：父容器有没有 padding 或 overflow: hidden，这些都会在响应式缩放时悄悄截断或偏移图片边缘。
