align-items不生效的常见原因：父容器未设display: flex、无明确交叉轴尺寸（如height）、flex-direction为column时误用、子元素绝对定位脱离文档流，或ie兼容性问题。
flex布局中align-items不生效的常见原因
直接写 align-items: center 却没反应，大概率不是语法错，而是父容器没撑开高度或没启用flex。flex居中依赖父元素是flex容器且有明确的交叉轴尺寸（对column方向是width，对row方向是height）。
- 父元素没设
display: flex或display: inline-flex—— 这是最常见的漏写 - 父元素高度为
auto且子元素没内容撑高 —— 此时交叉轴（垂直方向）长度为0，居中无从谈起 - 父元素用了
flex-direction: column，此时align-items控制的是水平方向，垂直居中得靠justify-content - 子元素是绝对定位（
position: absolute）—— 脱离文档流后，flex属性对它无效
垂直居中必须确保父容器有“可参考的高度”
很多页面里父容器只写了 display: flex，但没给 height 或 min-height，浏览器按内容高度渲染，align-items: center 就像让元素在1px高的盒子里居中——逻辑成立，但肉眼看不到效果。
- 开发时可临时加
height: 100vh或min-height: 100vh快速验证是否生效 - 生产环境更推荐用
min-height: 100vh配合内容自适应，避免内容超长时被截断 - 若父容器是某个固定高度的组件（如弹窗、卡片），确保该高度值大于子元素自身高度
align-items vs justify-content：别搞混主轴和交叉轴
默认 flex-direction: row 时，主轴是水平的，交叉轴才是垂直的 —— 所以 align-items 管垂直居中，justify-content 管水平居中。这点反直觉，容易写反。
- 想让子元素在父容器内垂直+水平都居中？两个都要写：
align-items: center; justify-content: center; - 如果改了
flex-direction: column，角色互换：justify-content变成控制垂直方向，align-items控制水平方向 - 检查当前flex方向最简单的方法：看子元素默认排列是横着还是竖着
兼容性与替代方案提醒
现代浏览器对 align-items 支持很好，但IE10/11有bug：当父容器高度由内容撑开（非固定值）时，align-items: center 可能失效。这不是写法问题，是引擎限制。
- 需要兼容IE？优先考虑用
display: table-cell+vertical-align: middle组合（需两层包装） - 或者用绝对定位 +
transform: translate(-50%, -50%)，但要求父容器position: relative - 纯CSS Grid方案更简洁：
display: grid; place-items: center;，不过IE完全不支持
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
