没有“万能居中代码”，text-align: center仅对父容器内行内子元素水平居中；margin: 0 auto需块级+显式width；flex需display: flex+justify-content+align-items+父容器高度。
没有“拿来即用”的万能响应式图片居中代码，但有 3 种稳定可复用的组合，每种都对应明确场景和硬性条件——漏掉任意一个，图片就偏移。
text-align: center 是最轻量的水平居中方案
它只作用于父容器，且只对行内子元素（比如默认的 <img>）生效。不需要改 <img> 自身样式，也不依赖 JavaScript。
- 必须写在父容器上，例如
<div style="text-align: center;"><img src="a.jpg"></div>；写在<img>上完全无效 - 父容器不能是
display: flex或display: grid，否则该样式被忽略 - 如果父容器宽度不明确（比如被
float拉窄、或没设width且内容撑不开），居中会失效 - 适合图文混排、单图 banner、卡片内配图等场景；多张
<img>会并排居中，如需换行得额外加display: block或<br>
margin: 0 auto 需要显式声明 display 和 width
这是兼容性最好、最可控的块级图片水平居中方式，但任意条件缺失都会静默失败。
Article To Html
下载
文章转信息图。将文章/笔记转化为手机可读的 HTML 信息图，自动匹配视觉风格。触发场景：文章转图、笔记转图、信息图、转小红书图、做张图、可视化这篇文章、文生图。
- 必须同时满足：
display: block（或inline-block）、有可计算的width（如width: 64px或max-width: 100%+width: 100%）、父容器不能塌陷（比如不能是float或inline-block） - 常见错误：只写
margin: 0 auto却忘了display: block，结果图片纹丝不动 - 响应式推荐写法：
<img src="logo.svg" style="max-width:90%">，既限制最大宽，又保持缩放 - 它不管垂直方向，图片仍贴顶；若需上下居中，必须配合父容器高度+flex/grid
Flex 布局实现水平+垂直居中必须三要素齐备
现代项目首选，但最容易只写一半就以为搞定——justify-content: center 和 align-items: center 必须同时存在，且父容器要有高度参照。
- 父容器必须设：
display: flex+justify-content: center+align-items: center - 父容器必须有可参考的高度，例如
height: 100vh、min-height: 300px，否则align-items无空间可居中，图片只会水平居中、垂直贴顶 - 别直接在
上加display: flex，它会让所有直系子元素（比如多个<p></p>）变成 flex item，破坏原有文档流 - 简写示例：
<div style="display: flex; justify-content: center; align-items: center; min-height: 400px;"><img src="hero.jpg"></div>
真正容易被忽略的是：**响应式不是加个 max-width: 100% 就完事，而是要确保居中逻辑在尺寸变化时依然成立**。比如 flex 父容器的 min-height 在小屏上是否还足够？text-align: center 的父容器有没有被媒体查询意外改成 inline-block？这些细节一错，居中就消失，且浏览器不报错。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
