text-align: center 必须写在父容器上，因它是块级容器属性，仅控制内部行内内容（如默认inline的）的水平位置；写在自身无效，且父容器若用float、inline-block或无明确宽度会导致居中失效。
直接给 <img> 加 margin: 0 auto 不生效，是因为它默认是行内元素；真正可靠的做法是控制父容器行为，而非硬调图片样式。
为什么 text-align: center 必须写在父容器上
因为 text-align 是容器属性，只影响其内部的行内级内容（比如默认状态的 <img>）。写在 <img> 自身上完全无效。
- 父容器若用了
float、display: inline-block或被其他内容撑窄，会导致宽度不明确，居中偏移 - 父容器里混了
<div> 这类块级子元素，它们不受 <code>text-align影响，会继续左对齐 - 如果父容器设了
font-size: 0（常见于清除 inline 间隙），图片可能消失或错位
推荐写法：
<div style="text-align: center">@@##@@</div>
margin: 0 auto 生效的三个硬性条件
这个组合只管水平方向，但任意一条不满足就会失效：
-
display: block（或inline-block）必须加在<img src="logo.png">上，否则margin: auto对行内元素无意义 - 图片要有可计算的宽度：显式设
width: 300px，或依赖固有尺寸；width: 100%或max-width: 100%会让auto失去参照 - 父容器不能是
display: flex或display: grid，否则会接管 margin 行为
示例：
@@##@@
响应式场景下用媒体查询切换对齐方式
不是每个断点都重写图片尺寸，而是按需覆盖父容器的对齐逻辑：
- 小屏居中：
@media (max-width: 768px) { .img-container { text-align: center; } } - 中屏左对齐：
@media (min-width: 769px) and (max-width: 1024px) { .img-container { text-align: left; } } - 大屏右对齐：
@media (min-width: 1025px) { .img-container { text-align: right; } }
若用 flex 布局，则把 text-align 替换为 justify-content: flex-start / flex-end / center。注意：别在媒体查询里重复定义 img { width: 100% }，那和对齐无关。
最容易被忽略的是父容器的 display 类型和宽度上下文——很多“居中失败”不是方法错了，而是它被 float、flex 或固定宽高意外覆盖了。
