align-items: center没效果是因为父容器未设display: flex且缺乏明确高度（如min-height: 100vh），导致交叉轴无参照长度；同时需避免混用margin: auto、vertical-align或脱离文档流的布局声明。
Flexbox垂直居中为什么写了却没效果
因为align-items: center只对display: flex容器生效，且依赖父容器有明确高度参考——没有height或min-height（比如min-height: 100vh），交叉轴就“没长度可分”，center就无从计算。
常见失效场景：
- 父容器只设了
width，没设高，内部又空或内容未撑开 → 高度为 0 - 用了
height: 100%但所有祖先元素都没设高 → 计算链断在某一级，最终还是 0 - 子元素是
display: block且width: 100%→ 不影响align-items，但容易让人误判为“整个居中崩了” - 混用了
margin: auto→ Safari 下会和align-items冲突，导致上下偏移
Grid的place-items: center真的一行就稳吗
语法上确实一行搞定：display: grid; place-items: center;，但它隐式依赖网格容器至少有一行可用轨道。如果父容器没写grid-template-rows，部分旧版 Firefox 或嵌套 Grid 场景下可能不触发垂直居中。
实操必须加的兜底项：
立即学习“前端免费学习笔记（深入）”；
-
min-height: 100vh（不能只靠height: 100%） -
grid-template-rows: 1fr——显式定义一行，确保垂直方向有可分配空间 - 避免和
float或position: absolute混用——Grid 容器内的绝对定位子元素不受place-items影响
IE11 不支持place-items，需回退到justify-items: center; align-items: center;。
选Flex还是Grid？看子元素数量和布局意图
Flex 是一维模型，align-items: center让所有子元素在交叉轴上并排居中；Grid 是二维模型，place-items: center让每个直接子元素各自在自己的网格单元里居中。
这意味着：
- 多个子元素横向排列（如导航菜单、按钮组）→ 用 Flex，天然保持单行流式布局
- 单个子元素需要居中（如登录框、弹窗、图标+文字卡片）→ Grid 更语义清晰，代码更短
- 子元素本身要跨行/跨列、或需重叠 → Grid 原生支持，Flex 得靠
position: absolute硬凑 - 项目要兼容 IE10+ → Flex 加
-ms-flex-align: center仍比 Grid 兼容性好得多
移动端100vh失真问题怎么绕过
iOS Safari 和部分安卓浏览器在软键盘弹出时会把100vh按“视口缩小时的高度”重新计算，导致容器变矮、子元素被顶出视口底部。
纯 CSS 无法修复，必须用 JS 动态调整：
- 监听
resize事件，用window.innerHeight重设min-height - 或改用
100dvh（2023 年起 Chrome / Safari / Firefox 已支持）——它是“动态视口高度”，键盘弹出会自动更新 - 若需兼容老版本，
100dvh可作为100vh的 fallback：min-height: 100vh; min-height: 100dvh;
这个坑不在 Flex 或 Grid 本身，而在高度单位的选择——哪怕你用最稳的方案，100vh在移动端就是不可靠的锚点。
