img居中完全由CSS控制：text-align:center需作用于父元素，margin:0 auto需img为block且有明确宽度，flex布局需父容器设display:flex并同时用justify-content和align-items，三者均依赖父容器的display类型、尺寸与流状态。
img 标签本身不负责居中，所有居中行为都靠 CSS 控制。直接给 img 加 align="center" 或用已废弃的 <center> 标签，现代浏览器会忽略或渲染异常——这不是标签选择问题，而是布局逻辑问题。
text-align: center 只对父容器生效
这是最轻量、兼容性最好的水平居中方式，但必须作用在包裹 img 的父元素（比如 <div>）上，不是 img 自己。
- 常见错误：
<img style="text-align: center">→ 完全无效 - 父容器若用了
float、display: inline-block或被其他样式撑窄，text-align会失效 - 适用场景：图文混排段落、卡片里单张配图、简单 banner；图片保持默认
inline状态即可 - 示例：
<div style="text-align: center"><img src="logo.png"></div>
margin: 0 auto 要求 display: block + 明确宽度
这个组合专治“图片独占一行还想水平居中”的需求，但任意条件缺失都会失效。
- 必须加
display: block，否则margin: 0 auto对inline元素无效 - 图片要有可计算宽度：显式设
width: 300px，或用max-width: 100%+height: auto（注意：仅max-width不足以触发auto计算，需配合父容器宽度约束） - 父容器不能是
display: flex或display: grid，否则会接管 margin 行为 - 示例：
<img src="icon.svg" style="display: block; width: 64px; margin: 0 auto;">
flex 布局实现水平+垂直居中
这是现代项目中最可控的双向居中方案，但容易卡在父容器配置上——很多人只写 justify-content: center，忘了它根本不起作用。
Article To Html
下载
文章转信息图。将文章/笔记转化为手机可读的 HTML 信息图，自动匹配视觉风格。触发场景：文章转图、笔记转图、信息图、转小红书图、做张图、可视化这篇文章、文生图。
立即学习“前端免费学习笔记（深入）”；
- 必须作用在父容器上：
<div style="display: flex; justify-content: center; align-items: center; height: 100vh;"><img></div> -
justify-content: center和align-items: center必须同时存在，缺一不可 - 父容器必须有明确高度参照，比如
height: 100vh、min-height: 300px；否则align-items没空间可居中，图片只会贴顶 - 旧 Android（4.4 及以下）需加
-webkit-前缀，如display: -webkit-flex
响应式对齐要靠媒体查询切换父容器行为
响应式对齐不是“一刀切”，而是按断点切换父容器的 text-align 或 justify-content，而不是重复定义图片尺寸或重写整个 flex 结构。
- 错误写法：每个断点都写
img { width: 100% }；正确思路是只覆盖对齐方式 - 小屏居中：
@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/flex-end/center
真正容易被忽略的是：图片是否居中，从来不由 img 标签决定，而取决于它所处的上下文——父容器的 display 类型、尺寸约束、文档流状态，三者缺一不可。改错一层，整套就失效。
