最稳的响应式水平居中方案是父容器设text-align: center且图片加max-width: 100%和height: auto；因img默认inline，margin: 0 auto对其无效，需display: block等条件才生效。

text-align: center 是最轻量、零基础也能立刻生效的方案，但必须写对位置——它只在父容器上起作用，且只管水平方向。

为什么 margin: 0 auto 加在 <img> 上总没反应？

因为 <img> 默认是 display: inline，而 margin: auto 对行内元素完全无效。想让它生效，得同时满足三个条件：

• 显式加 display: block 或 display: inline-block
• 图片要有可计算的宽度：比如 width: 300px；max-width: 100% 不行，浏览器无法算出“剩余空间”
• 父容器不能是 display: flex 或 display: grid，否则会接管 margin 行为

响应式场景下，硬设固定宽不现实，所以这个组合更适合图标、logo 等尺寸稳定的图片。

display: flex 居中为什么图片还是贴顶？

因为 justify-content: center 只管水平，align-items: center 才管垂直——但它依赖父容器在交叉轴（通常是高度）上有明确尺寸。没有高度，就等于让浏览器“在 0px 高的空间里居中”，结果就是图片纹丝不动地贴顶。

Article To Html

文章转信息图。将文章/笔记转化为手机可读的 HTML 信息图，自动匹配视觉风格。触发场景：文章转图、笔记转图、信息图、转小红书图、做张图、可视化这篇文章、文生图。

下载

• 必须给父容器设 height: 100vh 或至少 min-height: 300px
• 别直接在 上加 display: flex，会把所有 <p></p>、<div> 都变成 flex item，破坏原有流 <li>旧 Android（4.4 及以下）需补 <code>display: -webkit-flex 和对应前缀

响应式图片尺寸怎么控才不溢出也不变形？

只写 max-width: 100% 在宽屏设备上会让图片铺满整个视口，失去呼吸感；硬写 width: 800px 又会在手机上溢出。真正可控的做法是：

• 用 max-width: 90vw 替代 100%，留出左右边距
• 必须搭配 width: auto; height: auto;，否则浏览器可能按原始尺寸渲染，忽略约束
• 避免对 <img> 单独设 height，会导致拉伸；如需强控制，改用 object-fit: cover + 容器 aspect-ratio

最容易被忽略的是父容器的高度来源——不是“有没有 height”，而是“这个高度是否被浏览器实际计算出来”。比如 height: 100% 在上级容器没显式高度时，基本等于没写。