最可靠图片水平居中方式是设 display: block 和 margin: 0 auto；flexbox 更健壮但需父容器有宽度且兼容 ie10+；text-align: center 仅对行内内容有效，在 flex/grid 中失效；务必配合 max-width: 100% 和 height: auto 实现响应式。
用 margin: auto 配合块级显示最直接
图片默认是行内元素，text-align: center 能生效但依赖父容器文本对齐，不够可靠；真正可控的方式是让 <img> 变成块级元素再用自动外边距居中。
必须同时满足两个条件：设置 display: block 和 margin: 0 auto（左右 auto，上下 0 或具体值）。
<img src="photo.jpg" style="max-width:90%">- 如果图片在
<figure></figure>或带 class 的容器里，推荐把样式写在 CSS 中，避免内联样式干扰响应逻辑 - 注意不要只写
margin: auto—— 它会同时作用于上下，可能意外撑高容器；明确写成margin: 0 auto更安全
Flexbox 居中适合现代布局且兼容性够用
当图片包裹在有明确宽度/高度约束的容器中（比如卡片、模态框），用 Flexbox 是更健壮的选择。它不依赖图片是否块级，也不受浮动或 inline 元素影响。
Article To Html
下载
文章转信息图。将文章/笔记转化为手机可读的 HTML 信息图，自动匹配视觉风格。触发场景：文章转图、笔记转图、信息图、转小红书图、做张图、可视化这篇文章、文生图。
- 给父容器加
display: flex、justify-content: center，再确保容器有宽度（如width: 100%或max-width） - 如果还要垂直居中，加上
align-items: center，但要注意父容器需有明确高度或最小高度（min-height），否则可能无效 - IE10+ 支持
flex，若需支持 IE9 及更早版本，此方案不可用
text-align: center 不是万能，尤其在 flex/grid 容器里失效
很多人习惯给父元素加 text-align: center，但它只对行内级内容起作用。一旦父容器是 display: flex 或 display: grid，这个声明就完全被忽略——Flex/Grid 有自己的对齐机制，text-align 不参与控制子项位置。
- 检查开发者工具中父容器的
display值，如果是flex或grid，删掉text-align: center，改用对应容器的对齐属性 - 响应式场景下，媒体查询切换了父容器 display 类型时，
text-align很容易“突然失灵”，这是调试时最常漏掉的点 - 即便生效，
text-align对图片本身无尺寸控制，仍需额外加max-width: 100%和height: auto来保证响应性
别忘了响应式基础：max-width: 100% 和 height: auto
水平居中只是第一步。如果没配好尺寸约束，图片在小屏上会溢出容器、压垮布局，或者在大屏上模糊拉伸——居中也就失去意义。
-
max-width: 100%是关键：它让图片宽度随父容器缩放，但不会超过原始尺寸 -
height: auto必须跟上，否则等比缩放失效，图片会被压扁或拉长 - 避免同时设
width: 100%和max-width: 100%—— 前者强制填满，后者失去作用；优先用max-width，除非你明确需要拉伸
display: block 没加，margin 写成了简写却忽略了上下值，或者 flex 容器忘了设宽度……这些地方一错，居中就“看起来没反应”。前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
