text-align: center 仅对父容器内行内级子元素有效，img 需保持默认 inline 才生效；margin: 0 auto 要求 img 为 block 元素，否则无效；垂直居中必须用 flex 布局并配齐 justify-content 和 align-items，且父容器需有明确高度。
直接用 text-align: center 在父容器上，配合 img 的 max-width: 100% 和 height: auto，就能稳住水平居中；需要垂直居中时，必须换 display: flex 布局，且父容器得有明确高度。
为什么 margin: 0 auto 单独写在 img 上没用
因为 img 默认是 display: inline，而 margin: auto 对行内元素水平方向完全无效。常见翻车点：
- 只写了
margin: 0 auto，漏了display: block - 加了
max-width: 100%后再写margin: 0 auto——此时浏览器无法计算“剩余空间”，自动外边距失效 - 父容器用了
float、position: absolute或display: flex，会接管 margin 行为
text-align: center 失效的典型场景
这个属性只作用于父容器，且只影响其内部的行内级子元素（比如默认状态的 img）。容易被忽略的干扰项：
- 父容器本身宽度塌缩：比如空
div没设width或min-width，实际可居中空间为 0 - 父容器用了
display: inline-block或float，导致它不占据整行，text-align失去上下文 - 错误地把
text-align: center写在img标签里——该样式对自身无意义 - 父容器设置了
font-size: 0（常用于清除 inline 间隙），但没给img单独恢复font-size: initial，图片可能消失
需要垂直居中时，flex 必须配齐三要素
仅写 display: flex 和 justify-content: center 只能水平居中；要真正“随窗口缩放始终居中”，缺一不可：
anything-to-html
下载
将调研报告、方案对比、数据分析、需求梳理、会议纪要、设计说明、代码评审、学习笔记等任务产物输出为可在浏览器直接打开的单文件 HTML，替代 Markdown 作为最终交付物。Markdown 在信息密度、视觉清晰度和可分享性上已跟不上 AI 产物的丰富度，HTML 能同时承载排版、表格、SVG 等。
立即学习“前端免费学习笔记（深入）”；
- 父容器必须设
display: flex、justify-content: center、align-items: center - 父容器要有可计算的高度：用
min-height: 100vh比height: 100vh更安全，避免内容超长时截断 -
img自身必须加max-width: 100%和height: auto；若想留呼吸感，可用max-width: 90vw - 别在
body上直接设display: flex——它会让所有直系子元素（如多个p）变成 flex item，破坏文档流
媒体查询切换对齐方式，别碰图片尺寸
响应式对齐的本质是“按断点控制容器行为”，不是反复重写 img 样式。正确做法：
- 图片尺寸约束（如
max-width: 100%、height: auto）统一写在基础层，所有断点复用 - 对齐方式交给父容器：小屏用
text-align: center，大屏改justify-content: flex-end，中间断点切text-align: left - 避免每个
@media里都写一遍img { width: 100% }——冗余且易冲突
真正难搞的从来不是“怎么写居中”，而是父容器有没有稳定的高度来源、图片有没有被其他定位或浮动意外踢出文档流——这些细节不检查，再标准的写法也会在某个机型上突然失效。
