align-items: center 没生效，首要检查父容器是否有明确高度（如 min-height 或 height），其次确认父容器 display 确为 flex 且未被覆盖，再排查 img 的 inline 特性干扰及 gap 与 margin 混用问题。
align-items: center 没生效，先检查父容器有没有高度
Flex 的 align-items: center 是按交叉轴（默认垂直方向）对齐子项的**内容盒中心点**，但它需要一个明确的参考高度。如果父容器高度由内容撑开（比如只含文字和图片，没设 height 或 min-height），浏览器会把容器高度算成刚好包住内容，此时“垂直居中”在视觉上就看不出来。
常见错误现象：图文在容器里紧贴顶部，像没写 align-items 一样。
- 给父容器加
min-height: 48px或height: 100px快速验证是否是高度问题 - 响应式场景下优先用
min-height，避免小屏被截断 - 如果父容器本身是
position: absolute或flex子项，还要确认它的父级是否提供了有效尺寸
图片默认是 inline 元素，基线对齐干扰了 flex 计算
<img> 默认是行内替换元素，即使父容器用了 display: flex，它仍可能因隐式 vertical-align: baseline 导致渲染尺寸异常——比如底部多出几像素空白，拉高了整个 flex 行的高度，让 align-items: center 的中点偏移。
使用场景：单图 + 单行文字并排时最明显，尤其字体大小不一致或用了自定义图标字体。
立即学习“前端免费学习笔记（深入）”；
- 给
<img>加display: block切断基线依赖 - 或者统一加
vertical-align: top/middle（仅当不用 flex 时备用） - 若用 SVG，确保有
viewBox属性，否则渲染尺寸不可控
父容器被其他 CSS 规则悄悄覆盖了 display: flex
Flex 布局必须作用于**直接父容器**，且该容器的 display 值不能被更高优先级规则覆盖。实际项目中，常因组件库、重置样式或全局 class（如 .clearfix）导致 display: flex 失效。
常见错误现象：DevTools 里看到 align-items: center 是灰色的，hover 提示 “inactive”。
- 在 DevTools 中选中父容器，看 computed 栏里的
display是否真为flex - 临时加个
border: 1px solid red，确认容器是否真的“包住了”图片和文字 - 检查是否有
transform、float、position: absolute等属性影响了 flex 上下文
gap 和 margin 混用导致视觉错位
用 gap 控制图文间距很干净，但若同时给子元素设了 margin（尤其是 margin-top 或 margin-bottom），会和 align-items: center 冲突：flex 容器仍按内容盒中心对齐，但 margin 把元素推离了原本位置。
性能影响：无明显性能问题，但维护成本高，容易在改间距时反复调试。
- 统一用
gap，删掉所有子元素的margin - 若需首尾留白，改用父容器的
padding - 文字换行后错位？那是
gap作用于每行之间，不是整体，此时考虑flex-direction: column+justify-content: center
