align-items: center 仅作用于 flex 容器的直接子元素，需确保目标元素是 display: flex 父容器的直系子节点，并设置明确高度（如 min-height: 100vh），同时注意 flex-direction 影响对齐轴、避免 align-self 覆盖及 ie11 兼容性问题。
align-items: center 只对 flex 容器的直接子元素生效
很多人写了 display: flex 和 align-items: center，但元素没居中——大概率是因为目标元素不是 flex 容器的**直接子元素**。Flex 的对齐属性不传递、不继承，只作用于 immediate children。
- 检查 DOM 结构：确保你要居中的元素是
div（设了display: flex）的直系子节点，中间不能隔一层 wrapper - 如果父容器本身有 padding 或 border，会影响视觉居中感，建议用
box-sizing: border-box -
align-items默认值是stretch，不是center，不写就是不居中
垂直居中失效时先看 flex-direction 和 min-height
Flex 主轴方向决定 align-items 控制哪一维。默认 flex-direction: row，此时 align-items 管的是**交叉轴（即垂直方向）**；但如果改成 column，它就变成管水平方向了——这时候想垂直居中得用 justify-content: center。
- 确认容器没有意外设置
flex-direction: column - 容器必须有明确高度（或能撑开的高度），否则
align-items: center没参考基准。常见做法是加min-height: 100vh或固定height - 子元素若设置了
align-self: flex-start，会覆盖父级的align-items，需检查是否被局部覆盖
IE11 对 align-items 的兼容性坑
IE11 支持 Flexbox，但对 align-items 的实现有偏差：当容器高度由内容撑开（而非显式设定）时，center 可能表现像 flex-start。
- 强制给容器设
height或min-height，避免依赖“自动高度” - 避免在 IE11 中混用
align-items和margin: auto（后者在 flex 子项上 IE11 支持更稳） - 如果必须兼容 IE11 且场景简单，用
margin: auto替代更可靠：div { display: flex; }<br>div > p { margin: auto; }
align-items 不适用于单行文本内部垂直居中
align-items 居中的是 flex 项目（整个元素），不是元素内部的文字。想让一段文字在块内垂直居中，别套 flex 容器再调 align-items，那是绕远路。
- 纯文本垂直居中：用
line-height = height（仅限单行） - 多行文本或复杂内容：把文字容器设为 flex，并设
align-items: center; justify-content: center - 注意字体的
font-size和line-height差异会导致视觉偏移，不要只靠肉眼判断是否真居中
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
