图片在卡片中不居中，主因是卡片容器未撑开或宽度不明确；应设为块级、宽100%以上，再用text-align:center（单图）或flex+min-height（图文混排）实现居中。
卡片容器必须设为块级且宽度明确
图片在卡片里不居中，八成是卡片容器本身没“撑开”——比如用了 display: inline-block、float，或者父级被 max-width 卡窄了。卡片组件默认应是块级（display: block 或 display: flex），且宽度至少为 width: 100% 或 max-width: 100%，否则 text-align: center 或 margin: 0 auto 都会因“无剩余空间可分”而失效。
常见翻车点：
- 卡片用了
display: inline-flex→ 它变成行内尺寸，居中逻辑崩坏 - 卡片加了
padding但没配box-sizing: border-box→ 实际宽度超预期，影响居中基准 - 卡片外层有
overflow: hidden且高度塌陷 → 图片被裁或偏移
用 text-align: center 最轻量，但只管水平方向
这是卡片内单张图片最省事的写法，前提是图片保持默认 inline 行为，不额外设 display: block 或 float。它不依赖卡片高度，也不要求你算尺寸，兼容性覆盖 IE9+。
实操建议：
立即学习“前端免费学习笔记（深入）”；
- 给卡片容器（如
<div class="card">）加text-align: center - 确保卡片里没有其他块级子元素（如
<p>、<div>）混排，否则它们不受该样式影响，会左对齐破坏视觉平衡 - 如果卡片含多图并排，它们会自动居中排列；想强制换行，给
<img>加display: block或在后面插<br>
示例：
<div class="card" style="text-align: center;"> <img src="icon.svg" alt="icon" style="max-width: 100%; height: auto;"> </div>
Flex 布局实现真·居中，但 align-items 要配高度
当卡片需要图文混排、图标+标题+描述，或明确要求图片垂直居中时，display: flex 是唯一可控方案。但只写 justify-content: center 不够——align-items: center 在高度未定义时毫无作用，图片只会贴顶。
文章转信息图。将文章/笔记转化为手机可读的 HTML 信息图，自动匹配视觉风格。触发场景：文章转图、笔记转图、信息图、转小红书图、做张图、可视化这篇文章、文生图。
关键约束：
- 卡片容器必须有可参照的高度：用
min-height（推荐）、height或vh单位，比如min-height: 200px - 别直接在
<body>或全局 wrapper 上设display: flex→ 会把所有直系子元素（包括导航、页脚）都拉进 flex 流，结构全乱 - 旧 Android（4.4 及以下）需补
display: -webkit-flex，现代项目可忽略
示例：
<div class="card" style="display: flex; justify-content: center; align-items: center; min-height: 180px;"> <img src="logo.png" alt="logo" style="max-width: 100%; height: auto;"> </div>
响应式切换对齐方式，靠媒体查询改父容器属性
小屏居中、大屏左对齐这种需求，不是给 <img> 写一堆断点，而是控制卡片容器的 text-align 或 justify-content。图片自身尺寸用 max-width: 100% 统一处理，对齐行为由父容器接管。
错误做法：
- 每个断点都重写
img { width: 100% }→ 冗余且易冲突 - 对
<img>单独加@media→ 破坏语义，维护成本高
正确思路：
- 小屏居中：
@media (max-width: 768px) { .card { text-align: center; } } - 中屏左对齐：
@media (min-width: 769px) and (max-width: 1024px) { .card { text-align: left; } } - 大屏右对齐（flex 版）：
@media (min-width: 1025px) { .card { justify-content: flex-end; } }
注意：若卡片已用 flex，就统一用 justify-content 切换；若用 text-align，就保持 text-align 切换，别混用。
真正容易被忽略的是卡片内容高度波动带来的垂直对齐漂移——比如文字行数变化导致卡片高度伸缩，此时 align-items: center 会跟着动，但用户可能期望图片始终锚定在某个视觉中心。这种场景下，position: absolute + transform 反而更稳，只是得手动保活父容器的 position: relative。
