父容器交叉轴无高度时align-items静默失效；需设min-height: 100vh等可测量高度，确保子元素为直接flex item，且img等元素设display: block消除inline干扰。
父容器交叉轴没高度，align-items就静默失效
align-items: center不是不工作，而是它需要一个可测量的交叉轴空间——默认是垂直方向。如果父容器没设height或min-height，浏览器算出来的高度就是内容撑开的值（比如单行文字撑出24px），那“居中”就等于贴顶。
用 DevTools 看Computed面板里的height和min-height：要是显示0px或auto，问题八成在这儿。
- 推荐写
min-height: 100vh，比height: 100vh更安全（内容超长时不截断） - 移动端可用
min-height: 100dvh，但得留意旧 WebView 不支持 - 别依赖
height: auto，它等于没给高度
子元素不是直接flex item，align-items根本管不到
Flex 对齐只作用于弹性容器的**直接子元素**。如果你把<img>塞进<p></p>再丢进 flex 容器，那只有<p></p>是 item，<img>还在段落流里，align-items对它完全无效。
- 结构必须扁平：
<div class="flex-container"> <img><span>文字</span> </div> - 若语义上必须包装，可用
display: contents让 wrapper 不参与布局（IE 不支持） - 删掉多余包裹层，比如
<div><div><div>…</div></div></div>这种嵌套
inline 元素和 line-height 在背后捣乱
哪怕结构对、高度也有了，<img>默认是display: inline，会受line-height和vertical-align: baseline影响，在底部留白；文字容器（如<p></p>）自带margin和默认line-height，也会偏移视觉中心。
-
img { display: block; }是最干净的解法 - 文字容器加
margin: 0; line-height: 1.2;（别设大于1.4，尤其小容器） - 避免给
<input type="checkbox">设vertical-align，它和 Flex 对齐逻辑冲突
flex-direction切换后，justify-content和align-items角色互换
很多人改了flex-direction: column却还指望justify-content: center水平居中，结果发现不对劲——因为主轴变了，justify-content现在管的是垂直方向。
- 保持
flex-direction: row（默认），专注解决高度问题，最稳 - 真要用
column，就得写justify-content: center（控垂直）、align-items: center（控水平） - 别靠切主轴来“绕开”高度缺失，那只是掩盖问题
真正卡住人的地方，从来不是属性拼错，而是父容器高度为0、图文被无意嵌套、或者line-height从全局继承下来悄悄拉高了容器——改一行 CSS 就见效，但得先定位到那一行。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
