html卡片中图片和标题居中需分情况：text-align:center仅对父容器内行内元素水平居中；margin:0 auto需图片为块级且有固定宽度；flex布局需同时设justify-content:center、align-items:center及容器明确高度。
HTML卡片布局里图片和标题居中，不是加个text-align: center就完事——它只管水平，且只对父容器生效；也不是套个margin: 0 auto就能垂直居中，它压根不处理垂直方向。
为什么text-align: center经常没反应
新手最常把text-align: center直接写在<img>或<h2></h2>标签上，这完全无效。这个属性必须作用于**父容器**，而且只影响它的行内子内容（比如默认inline的<img>、文字）。
- 如果卡片结构是
<div class="card"> <img><h3>标题</h3> </div>，得给.card加text-align: center - 如果
.card里还嵌了<div>或<code><p></p>这类块级元素，它们不会被text-align影响，依然靠左 - 一旦
.card用了display: flex或display: grid，text-align直接被忽略 -
<img>若被设了float或position: absolute，也脱离文本流，text-align失效 - 给
<img>加display: block，否则margin: 0 auto对行内元素无效 - 宽度不能是
width: 100%或未设置——浏览器没法算“剩余空间”，auto就失去意义 - 标题
<h3></h3>是块级元素，默认独占一行，margin: 0 auto对它不起作用；想让它居中，得单独加text-align: center或改display - 这个方案完全不管垂直方向，图片和标题仍会贴顶排列
- 必须在卡片容器（比如
.card）上设display: flex，不是<img>或<h3></h3>自己 - 必须同时写
justify-content: center（控水平）和align-items: center（控垂直）——只写一个只能单向居中 - 卡片容器必须有明确高度参照，比如
min-height: 200px或height: 100vh；否则align-items: center无空间可居中，图文只会水平居中、垂直贴顶 - 别把
display: flex直接加在上——它会让所有直系子元素变成 flex item，破坏原有结构 -
<img>没设max-width: 100%或object-fit: cover，在窄屏下可能拉伸变形或留白 - 标题文字没设
flex: 1或flex-grow: 1，在小屏幕上会被图片挤出容器，甚至换行破坏并排结构 - 用
gap控制图文间距最干净，但 IE 不支持；需兼容旧版时，得退回到margin-right+:last-child清除 - 图片加载慢时，flex容器可能先按 0 高度渲染，导致文字上移——可给
<img>设固定width/height，或用aspect-ratio预留空间
margin: 0 auto只能水平居中图片，但有硬门槛
想让图片单独水平居中？可以，但必须同时满足三个条件：图片是块级、有明确宽度、父容器没用flex/grid。
Flex布局实现图文整体居中，三要素缺一不可
要让图片和标题作为一个整体，在卡片内水平+垂直居中，display: flex是最稳的选择，但漏掉任意一项都会翻车。
图文混排时容易踩的间距和换行坑
实际写的时候，真正卡住人的往往不是语法，而是渲染行为没预判：
复杂点在于：图片和标题的关系决定了起点——是“图在上、标题在下”的标准卡片？还是“图左文右”的信息栏？不同关系对应不同 flex 子项排列方式，不能硬套同一套样式。
