align-items: center没反应的最常见原因是父容器未设display: flex或grid，且缺乏height/min-height约束；它仅在flex/grid上下文中生效，且依赖容器在交叉轴上有可分配空间。
align-items 能解决大部分垂直对齐问题，但前提是它被用在正确的容器上、配合合适的高度约束，否则大概率“写了等于没写”。
为什么 align-items: center 没反应？
最常见原因是父容器不是 flex 或 grid 容器——align-items 对 display: block、display: inline 甚至 display: table 完全无效。
- 检查父元素是否显式设置了
display: flex或display: grid（不能只靠它被嵌套在 flex 项目里就默认生效） - 用浏览器开发者工具的 “Computed” 面板确认
display的最终计算值，比看 Styles 更可靠 - 如果容器高度由内容撑开（即没设
height或min-height），align-items: center在 flex 中实际表现等同于flex-start，视觉上毫无变化
flex 和 grid 中 align-items 的行为差异
虽然语法一样，但作用机制和常见陷阱不同：
- 在 flex 容器中，
align-items控制的是所有子项在交叉轴（默认为垂直方向）上的对齐；若flex-direction: column，则交叉轴变成水平方向，align-items就控制水平对齐 - 在 grid 容器中，
align-items始终作用于行轴（block axis），也就是常规书写模式下的垂直方向，不受grid-auto-flow影响 -
stretch是两者默认值，但 grid 中拉伸的是网格项在其网格区域内的高度，flex 中拉伸的是子项在交叉轴上的尺寸——若子项设了height或min-height，拉伸就会失效
IE11 下 align-items 失效的绕过方案
IE11 对 align-items 的支持存在已知缺陷：当容器仅设 min-height 而无 height 时，center 经常退化为顶部对齐；baseline 基本不可用。
- 给 flex 容器加
height: 100%或具体像素值（如height: 400px），避免依赖min-height单独起作用 - 改用
flex-direction: column; justify-content: center，把“垂直居中”转为主轴居中——IE11 对justify-content支持更稳定 - 终极保底：父容器设
position: relative，子元素用position: absolute; top: 50%; transform: translateY(-50%)
align-self 覆盖失败的典型原因
align-self 只对直接子元素生效，且必须在该子元素未脱离文档流的前提下才起作用。
- 如果子元素设置了
position: absolute或position: fixed，它已脱离 flex/grid 流，align-self完全无效 - 浮动（
float）在 flex 项目上会被忽略，但残留的float声明可能干扰判断，建议清理 -
align-self优先级高于align-items，但无法覆盖其他定位属性（如margin-top或top）带来的偏移
真正容易被忽略的点是：align-items 的效果高度依赖容器自身的高度上下文。它不“创造”空间，只分配已有空间——所以没有明确高度约束的 flex 容器，往往让开发者误以为属性失效，其实只是没空间可居中。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
