父容器必须设置明确高度（如min-height: 48px）才能使align-items: center生效；子元素需为flex直接子项；需显式声明flex-direction；文字内部居中需额外flex布局与样式清理。
父容器没有交叉轴高度，align-items:center就无从下手
写了 align-items: center 却看到文字或图标紧贴顶部，不是属性失效，而是容器在垂直方向（默认交叉轴）上根本没“空间”——它高度由内容撑开，等于只有 20px 高，那中心点就在 10px 处，子元素 margin box 中心对齐过去，视觉上还是顶着。
必须给父容器设明确高度或最小高度：
-
min-height: 48px（比固定height更安全，适配内容变化） -
height: 100dvh（比100vh更稳，避开移动端地址栏缩放问题） -
height: -webkit-fill-available（Android WebView 和 iOS Safari 兼容性较好） - 避免只写
height: auto或完全不设高度
子元素不是直接 flex item，align-items 就管不到它
把 <img> 塞进 <p> 再丢进 flex 容器，align-items: center 对齐的是那个 <p> 块，不是图片本身。同理，<span>文字</span> 被包在 <label> 里，也只对齐 <label>。
正确做法是让图文成为同一级子元素：
立即学习“前端免费学习笔记（深入）”；
- 结构必须是：
<div class="flex"><img><span>文字</span></div> - 删掉中间包裹层，比如不要
<div><img></div>文字 - 若需语义化包装，可用
display: contents（注意 IE 不支持） - SVG 图标务必加
display: block，否则 baseline 干扰仍在
flex-direction 没显式声明，主轴/交叉轴可能被偷换
某些 WebView（如 Android 4.4 系统 Webview、微信旧版）会重置 flex-direction，导致你写的 align-items: center 实际作用在水平方向——因为主轴被悄悄设成 column 了。
别依赖默认值，强制写清楚：
- 垂直居中图文时，加
flex-direction: row - 水平居中单个块时，加
flex-direction: column - 用
getComputedStyle(el).flexDirection在控制台确认真实值，别只看样式面板 - 微信某些版本对
row支持差，可临时用flex-direction: row-reverse; justify-content: flex-end模拟
文字本身需要内部居中，光靠外层 align-items 不够
align-items: center 居中的是整个 <p> 或 <span> 的 margin box，但多行文字的行盒（line boxes）未必填满这个 box。尤其当有默认 margin、line-height 过大，或字体渲染基线偏移时，文字看起来还是偏上。
真正让文字“在块里视觉居中”，得再加一层控制：
- 给文字容器加
display: flex; align-items: center（让它自己变成 flex 容器） - 同时清除干扰：
margin: 0; line-height: 1.2（别用line-height: 容器高度，多行失效） - 用
<div>替代<p>，避免浏览器默认样式污染 - IE11 下更稳妥：改用
flex-direction: column; justify-content: center（兼容性比align-items好）
最容易被忽略的点是：你以为在调文字，其实是在调容器；你以为在调容器，其实是在调它的父容器高度。三层高度不明确，align-items: center 就永远只是个语法正确的摆设。
