Flex居中需同时设justify-content和align-items，且父容器必须有明确高度（如height: 100vh），否则交叉轴无参考范围导致垂直居中失效；子元素不能绝对定位或混用display值。
父容器必须有明确高度，否则居中会“失效”
很多人写完 display: flex; justify-content: center; align-items: center; 发现子元素没居中，第一反应是代码错了——其实大概率是父容器没设 height。Flex 的 align-items: center 依赖交叉轴（垂直方向）有可计算长度，若父容器靠内容撑高，高度就是子元素自身高度，自然谈不上“居中”。
-
height: 100vh最常用，适合全屏居中 - 用
min-height: 100vh不行——它只保证最小高度，不提供对齐基准 - 若父容器是
body，别忘了重置默认margin: 0，否则顶部/底部留白会干扰视觉判断 - 嵌套在其他布局中时（比如 Grid 子项），确保该父容器本身已获得确定高度，而非“由 flex 自动收缩”
子元素不能是绝对定位，否则脱离 flex 流程
Flex 布局只作用于 flex item，也就是文档流内的直接子元素。position: absolute 的子元素会脱离文档流，justify-content 和 align-items 对它完全无效——它既不参与主轴排列，也不响应交叉轴对齐。
- 常见误操作：给子元素同时加
margin: auto和align-items: center→margin: auto在 flex 容器里行为不可控，建议删掉 - 如果真需要绝对定位子元素（比如浮层、tooltip），就不要指望父 flex 容器帮它居中，改用
position: absolute+transform或单独包裹一层 flex - 图片等替换元素若未设宽高，加载完成前可能短暂偏移，这不是 flex 问题，而是渲染时机导致，可通过
aspect-ratio或占位符缓解
别混用 display: flex 和 display: grid
同一个元素的 display 值只能生效一个。如果你在调试时写了两行：display: flex; 和 display: grid;，后者会彻底覆盖前者，justify-content 和 align-items 就不再起作用——但控制台不会报错，容易卡很久。
- 检查开发者工具的 Computed 面板，确认最终生效的是哪个
display值 -
place-items: center是 Grid 的语法，和 Flex 的justify-content/align-items不通用 - 想兼容老浏览器（如 IE11），优先用 Flex 并配 Autoprefixer，Grid 的 IE 支持需手动写
display: -ms-grid，成本高且易出错
移动端或滚动容器里，100vh 可能不准
在 iOS Safari 或部分 Android 浏览器中，地址栏收放会导致 100vh 动态变化，造成居中元素“跳动”。这不是 Flex 本身的缺陷，而是视口单位的固有限制。
- 临时解法：用
height: 100%+ 确保所有祖先元素（html,body）都设了height: 100%和margin: 0 - 更稳方案：用 JS 读取
window.innerHeight动态设置自定义 CSS 变量，再在样式中引用，但增加了运行时依赖 - 若容器本身可滚动（比如弹窗内区域），别依赖整个视口，而应设固定高度或用
max-height+overflow: auto控制范围
实际项目里最容易被忽略的，是父容器高度来源是否稳定——它不一定是写死的 100vh，也可能是某个响应式断点下的计算值，或是 JS 动态注入的高度。Flex 居中本身很可靠，但它的前提条件非常具体，漏掉任意一环，结果都会“看起来没居中”。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
