Flexbox垂直居中在移动端“失效”是因100vh被软键盘压缩致父容器塌陷，align-items计算中心偏移；应改用min-height:100vh、监听resize动态更新高度、避免height:100%。
Flexbox垂直居中为什么在移动端“失效”？
因为100vh在 iOS Safari 和部分安卓 WebView 中会被软键盘弹出压缩，导致父容器高度塌陷，align-items: center算出来的“中心”实际已偏移出视口。这不是 Flexbox 本身的问题，而是视口单位被浏览器动态重写的结果。
实操建议：
立即学习“前端免费学习笔记（深入）”；
- 用
min-height: 100vh替代height: 100vh，避免内容超长时直接溢出 - 对全屏登录页/引导页等关键场景，加 JS 监听
resize事件，用window.innerHeight动态更新容器高度（注意防抖） - 避免给 Flex 容器设
height: 100%—— 若任意一个祖先没设高度，它会算成0 - 调试时在父容器加
background: rgba(0,0,0,0.1)，一眼看出它是否真占满视口
Grid的place-items: center为何有时不生效？
它依赖隐式网格轨道存在，但若父容器没定义 grid-template-rows 或 grid-template-columns，某些旧版 Firefox 或嵌套 Grid 场景下，浏览器可能不生成可分配空间的行轨道，导致垂直方向无“中心”可居。
实操建议：
立即学习“前端免费学习笔记（深入）”；
- 显式写
grid-template-rows: 1fr，确保垂直方向有弹性轨道 - 不要和
float、position: absolute混用 —— 绝对定位子元素完全脱离 Grid 布局流，place-items对它无效 - 在 CSS 中直接写
display: grid; place-items: center; min-height: 100vh; grid-template-rows: 1fr;，四行足矣，不用拆开 - IE11 不支持
place-items，需回退到align-items: center; justify-items: center;
响应式断点切换时，flex-direction 改变后对齐错乱
justify-content 和 align-items 的作用轴随 flex-direction 动态切换：默认 row 时，justify-content 管水平，align-items 管垂直；改成 column 后，二者角色互换。很多人只改了方向，忘了同步检查对齐属性是否还符合预期。
实操建议：
立即学习“前端免费学习笔记（深入）”；
- 在媒体查询里成对修改：
flex-direction: column; justify-content: center; align-items: stretch;（注意此时justify-content实际控制的是垂直对齐） - 单个子元素居中更稳妥的做法是用
margin: auto—— 在 Flex 容器中，它自动吸收主轴和交叉轴剩余空间，不受flex-direction影响 - 避免在同一个规则块里混用
flex-direction和place-items，语义冲突容易引发不可预测行为
绝对定位 + transform 在响应式中要不要用？
它适合模态框、加载指示器等脱离文档流的固定尺寸组件，但不适合响应式内容区 —— 因为 top: 50%; left: 50%; transform: translate(-50%, -50%) 依赖父容器有 position: relative，而响应式布局常通过 Flex/Grid 控制父容器高度，一旦父容器高度由内容撑开或被媒体查询重置，定位基准就飘了。
实操建议：
立即学习“前端免费学习笔记（深入）”；
- 仅当子元素宽高固定（如 SVG 图标、固定尺寸按钮）且父容器明确设了
position: relative时才用 - 若内容动态变化，优先选 Flex/Grid；若必须用定位，把
transform换成margin: auto（前提是父容器是 Flex/Grid） - 旧版 Android WebView 对
transform渲染有偏移，加will-change: transform可缓解
100vh，还是 JS 读到的 window.innerHeight，还是开发者工具里看到的“Computed Height”。不同场景下，它们可能指向三个不同的数字。 
