align-items: center 无效的根本原因是容器缺乏明确高度，导致交叉轴无空间可居中；必须显式设置 height 或 min-height，且需确保子元素未脱离文档流。
直接给父容器设 display: flex 和 align-items: center，但必须确保容器有明确高度——否则垂直居中无效。
为什么 align-items: center 没反应？
常见错误是只写了 align-items: center 却没管容器高度。Flex 的交叉轴（默认垂直方向）居中依赖容器在该轴上有可计算的空间：
- 容器高度为
auto（由内容撑开）时，align-items: center实际“居中”了，但视觉上完全看不出 - 必须显式设置
height或min-height，比如min-height: 100vh、height: 400px或height: 100%（前提是父级也有高度） - 如果列表项本身是
display: inline（如纯文本或未设display的span），align-items仍生效，但容易误判为“没动”，建议统一设display: block或包裹一层容器
ul 自己要不要设 display: flex？
取决于你想居中的是整个 ul，还是其中的 li 项：
- 想让整个列表在页面中垂直居中 → 给
ul的**父容器**设display: flex+align-items: center - 想让每个
li在ul内部垂直居中（比如li高度不一，文字需对齐基线）→ 给ul本身设display: flex，再加align-items: center - 注意：
ul设display: flex后，list-style和默认padding-left会失效，需手动清除：list-style: none; padding: 0;
IE11 兼容性要注意什么？
IE11 对 align-items: center 渲染不稳定，尤其遇到 img 或带 vertical-align 的内联元素时，常偏移 1–2px：
- 单个
li时，改用margin: auto更可靠（仅限唯一子元素） - 多个
li时，优先用flex-direction: column+justify-content: center，IE11 对这个组合支持更好 - 避免用
align-content——它在 IE11 几乎不生效，且只在flex-wrap: wrap且多行时才起作用
真正卡住的点往往不是写法，而是容器高度缺失或子元素意外脱离文档流。检查 position: absolute、float、display: inline 这几处，比反复调 align-items 更有效。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
