align-items: center没反应，90%是因为父容器缺display: flex或明确高度；它仅在flex容器中生效，且依赖交叉轴可测量尺寸，需配合justify-content: center实现水平垂直居中。
align-items: center 为什么写了没反应
写了 align-items: center 却没垂直居中，90% 是因为父容器缺了两个硬条件：没设 display: flex，或者没高度（height 或 min-height）。它不是“加了就生效”的装饰属性，而是依赖 Flex 布局引擎和交叉轴尺寸计算的布局指令。
- 父容器必须声明
display: flex——align-items对非 flex 容器完全无效 - 父容器要有可测量的交叉轴长度：比如
min-height: 100vh、height: 400px，或被内容撑开（但内容少时极易塌陷） - 子元素不能有
align-self: flex-start等覆盖值，否则会绕过父级设置
父容器 height 和 min-height 的实际影响
在 Safari（尤其是移动端）和部分旧版浏览器里，min-height: 100vh 有时会被地址栏收起/展开干扰，导致视觉跳动；而纯 height: 100vh 在某些嵌套场景下可能继承失败。更稳的做法是组合使用：
-
height: 0+min-height: 100vh（解决 Safari 13–15 的计算偏差） - 如果父容器是
，记得先重置：html, body { height: 100%; margin: 0; } - 避免用
flex: 1代替显式高度——它只在 flex 上下文中有效，且依赖兄弟节点，不稳定
align-items 和 justify-content 别搞混方向
默认 flex-direction: row 时，justify-content: center 控制水平，align-items: center 控制垂直；一旦改成 column，两者作用轴就对调了。常见误操作是只写一个，结果只有一维居中。
- 要同时水平+垂直居中，必须两个都写：
justify-content: center; align-items: center; - 别误用
align-content: center—— 它只在flex-wrap: wrap且真换行时才生效，单行完全没用 - 子元素如果是
position: absolute，已脱离文档流，align-items对它彻底无效
IE11 和老 Safari 的兼容性坑
IE11 虽支持 Flexbox，但对 align-items: center 的高度推导逻辑有偏差：当父容器高度由内容撑开而非显式设定时，它常表现得像 flex-start。这不是 bug，是渲染引擎差异。
- 简单场景下，改用
margin: auto更稳：div > p { margin: auto; }（需确保父容器是 flex） - 若必须用
align-items，给子元素加height: auto显式重置，能缓解 IE11 的 stretch 行为异常 - 极端兼容需求（如 IE9），放弃 flex，改用
display: table-cell; vertical-align: middle;，但响应性和语义会受损
真正卡住人的从来不是语法拼错，而是 computed height 为 0 却还在调 align-items，或者子元素嵌套太深，根本不是 flex 容器的直接子节点。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
