align-items: center在多行文字+图标场景下失效，因其仅对齐flex item几何中心，而多行文字块高度含行间距，图标按自身盒模型中心对齐，导致视觉偏高；需拆分控制：文字容器设inline-block+vertical-align: middle，图标显式设inline-block/block并规范viewBox。
align-items: center 在多行文字 + 图标场景下会失效——它只对齐单个 flex item 的几何中心，而多行文字本身是一个块级元素，它的“高度”由行高和行数决定，图标却仍按自身盒模型中心对齐，结果就是图标悬在文字块中间偏上位置。
为什么多行文字里 align-items: center 看起来没用
多行文字（比如 <p> 或 <div>）作为独立 flex item，其交叉轴尺寸是整个内容块的高度（含行间距），align-items: center 会把图标对齐到这个总高度的中点；但人眼判断“对齐”是基于首行文字基线或视觉重心，尤其当文字两行、图标 16px 高时，图标中心往往落在第一行下半部，造成“偏高”错觉。
- 文字容器没设
display: inline-block或display: contents，导致它无法被 flex 按行内逻辑再细分 - 图标仍是
display: inline（如未显式改inline-block的<svg>），继续走 baseline 对齐老路 - 父容器未设
min-height，flex 交叉轴长度不可测，align-items实际无参照 - 用了
gap控制间距，但在 IE11 或某些旧安卓 WebView 中静默失效，间接暴露对齐偏差
多行文字 + 图标必须拆开控制对齐
不能指望一个 align-items: center 同时管住文字块和图标。得让文字“可参与对齐”，图标“可精确定位”：
- 给文字容器加
display: inline-block，并设vertical-align: middle（此时vertical-align在 flex 外层生效，用于微调它和图标的相对位置） - 图标必须显式设
display: inline-block或block，<svg>还要带width/height和viewBox="0 0 16 16" - 父容器用
display: flex+align-items: flex-start（先归零），再靠margin-top或align-self: center单独调图标 - 若文字需省略（
text-overflow: ellipsis），必须包裹在display: block容器里，且该容器不能是 flex item 直接子元素——否则 flex 会忽略其内部溢出逻辑
align-content: center 是另一个坑，别乱用
align-content: center 只在 flex 容器存在多行（flex-wrap: wrap）时才起作用，它对齐的是“行盒子”的整体，不是单个 item。你在按钮里放一段多行文字 + 一个图标，它们仍是同一行里的两个 item，align-content 完全不触发。
立即学习“前端免费学习笔记（深入）”；
- 误写成
align-content: center替代align-items，会导致图标完全失去垂直约束，回退到flex-start - 只有当你明确用
flex-wrap: wrap并排多个按钮/卡片，且想让这些“行”在容器里上下居中时，才轮到align-content - 多行文字本身不是“多行 flex item”，而是单个 item 内部换行，跟
flex-wrap无关
真正难调的从来不是属性名，而是 SVG 的 viewBox 是否真为 "0 0 16 16"、文字容器有没有意外继承 line-height: 1.8、以及调试时是否看了 computed 样式里 display 确实变成了 inline-block——这些细节不验证，光改 align-items 就是原地打转。
