能，但需父容器有明确高度且子元素未脱离文档流；注意 flex-direction 切换导致的主/交叉轴变化、移动端 100vh 兼容性及微信 X5 内核渲染异常等问题。
flex align-items: center 在移动端真能垂直居中吗？
能，但前提是父容器有明确高度，且子元素不是 position: absolute 或 float 脱离文档流的元素。很多“没居中”其实是父容器高度塌陷导致的——比如父级只写了 display: flex 却没设 height 或 min-height，在移动端 viewport 高度变化频繁时尤其明显。
常见错误现象：align-items: center 写了，但内容紧贴顶部；用 Chrome DevTools 检查发现父容器高度只有 0px 或远小于预期。
- 移动端必须确保父容器有可计算的高度来源：比如
height: 100vh、min-height: 100vh，或通过flex: 1继承自更高层 flex 容器 - 避免对子元素设
margin-top: auto之类“伪居中”写法，它和align-items: center混用会冲突 - 注意 Safari iOS 12–14 对
100vh的兼容问题：键盘弹出时该值会变小，此时改用100dvh（如支持）或 JS 动态设置更稳妥
为什么有时 align-items center 居中失效，但 justify-content center 反而有效？
因为 justify-content 控制主轴（默认是水平），align-items 控制交叉轴（默认是垂直）。如果误把 flex 容器设成了 flex-direction: column，那主轴就变成垂直方向，此时 justify-content: center 才管垂直居中，align-items: center 反而控制水平对齐。
使用场景：做全屏登录页、弹窗内容区、卡片内图标+文字组合等需要严格垂直对齐的模块。
立即学习“前端免费学习笔记（深入）”；
- 检查是否无意写了
flex-direction: column—— 这是移动端布局中最常被忽略的方向切换点 - 用
flex-direction: row（默认值）时，align-items: center管垂直，justify-content: center管水平 - 想同时水平+垂直居中？直接写
justify-content: center; align-items: center;，别漏掉任一属性
移动端 flex 垂直居中在微信内置浏览器里表现异常怎么办？
微信 Android 版（X5 内核）和部分 iOS 微信对 flex 的解析存在延迟或不完整，尤其当父容器高度依赖 JS 计算或动态插入时，align-items: center 可能初次渲染失败，后续 resize 才生效。
性能影响：纯 CSS flex 居中本身无性能问题，但若配合大量 transform 动画或频繁重排的 JS 逻辑，会放大渲染偏差。
- 加一层
min-height: 1px到父容器，能强制触发 X5 内核重新计算交叉轴尺寸 - 避免在
body直接设display: flex—— 微信某些版本会忽略body上的 flex 样式，建议包一层<div class="app"> <li>兼容兜底方案：对老版微信（iOS 12 以下、Android X5 ≤ 6.8），可用 <code>display: table-cell; vertical-align: middle，但需保证父级是display: table - 如果子元素宽高不确定（比如一段自适应文字+图标），别用
margin: auto，它在 flex 容器中仅对“有宽高的块级元素”可靠 - 用
align-items: center时，注意flex-wrap: wrap会让多行内容按行居中，而不是整体居中 —— 此时应改用align-content: center - 不要给子元素设
vertical-align: middle，它对 flex 子项完全无效
align-items center 和 margin auto 垂直居中哪个更适合移动端？
align-items: center 更适合，前提是容器结构可控；margin: auto 需要子元素是块级且有固定宽高，在响应式场景下难维护。
参数差异：前者是容器级声明，后者是子元素级声明；前者受父容器 flex-direction 和 align-items 默认值影响，后者只依赖父容器是否为 display: flex 或 display: grid。
最常被忽略的点：父容器的 padding 和 border 会参与 align-items 的计算范围，如果居中偏移了几像素，先检查是不是边框或内边距没重置。还有，box-sizing: border-box 必须写全，不然不同浏览器对 height 的解释可能差几个像素。
