图文居中需用flex布局并配齐三要素：父容器设display: flex、justify-content: center和align-items: center，且需明确高度；text-align: center仅对行内内容有效，遇flex/grid/浮动/绝对定位即失效。
图片和文字同时居中，不是加个 text-align: center 就完事——它只管水平，且只对父容器生效；也不是随便套个 margin: 0 auto，因为图片默认是行内元素，不设 display: block 就不会响应。
为什么 text-align: center 经常失效
根本原因是：它作用对象是父容器，影响的是其内部的**行内内容**（如文字、<img>、<span>），但前提是这些子元素没被其他布局方式“接管”。
- 如果父容器用了
display: flex或display: grid，text-align直接被忽略 - 如果图片被设了
float或position: absolute，它就脱离了文本流，text-align对它无效 - 如果父容器里混着
<div>这类块级子元素，它们默认靠左，text-align不影响它们——除非你给它们加display: inline-block
flex 布局实现图文并排+居中要配齐三要素
这是目前最可控、最常用的方式，但漏掉任意一项都会导致错位或不居中。
- 父容器必须设
display: flex—— 否则子元素不会变成 flex item - 必须同时写
justify-content: center（水平）和align-items: center（垂直）——只写一个只能单向居中 - 父容器要有明确高度（如
height: 200px或min-height: 100vh），否则align-items: center在垂直方向无参照，效果不可见
示例结构：
.card { display: flex; justify-content: center; align-items: center; height: 240px; gap: 16px; }
.card img { width: 80px; height: 80px; border-radius: 4px; }
.card .text { font-size: 14px; }
图片变形、文字溢出、间距不对？这些坑比代码还常见
实际写的时候，真正卡住人的往往不是语法，而是细节行为没预判：
立即学习“前端免费学习笔记（深入）”；
-
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预留空间
别硬套方案：图文关系决定布局起点
是“一张图 + 一段说明”？还是“多图多文横向平铺”？或是“图在左、文在右”的 profile 卡片？不同关系对应不同起点：
- 单组图文并排居中 → 用
flex最直接 - 多组图文网格排列 →
display: grid+grid-template-columns: repeat(auto-fit, minmax(240px, 1fr))更稳 - 图文需要基线对齐（比如图标+小字标签）→ 回归
vertical-align: middle+inline-block，比 flex 更轻量
真正麻烦的从来不是“怎么居中”，而是居中之后，图片会不会被压扁、文字会不会跑出边界、小屏下要不要重排——这些都得在写第一行 CSS 前就想好。
