align-items: center不生效是因为父容器未设display: flex或交叉轴无可用空间；必须同时满足display: flex、明确高度（如min-height: 100vh）且子元素未脱离文档流。
为什么只写 align-items: center 不生效
它确实管垂直居中，但前提是父容器已设 display: flex 且交叉轴（默认为垂直方向）有可分配空间。常见失效现象是：子元素水平位置正常，却紧贴父容器顶部——根本不是属性“没起作用”，而是父容器高度为 auto 或未定义，导致交叉轴长度为 0。
必须同时满足：
- 父容器设 display: flex
- 父容器有明确高度（如 min-height: 100vh、height: 400px）
- 子元素未脱离文档流（即不能是 position: absolute）
justify-content: center 和 align-items: center 必须一起用吗
要实现“垂直 + 水平”完全居中，必须一起用。原因很直接：
- 默认 flex-direction: row 时，justify-content 控制主轴（水平），align-items 控制交叉轴（垂直）
- 单独写 justify-content: center → 只水平居中，垂直仍按 flex-start 对齐（贴顶）
- 单独写 align-items: center → 只垂直居中，水平仍按 flex-start 对齐（贴左）
- 两者共存，才覆盖两个方向
注意：align-content: center 完全无关——它只在 flex-wrap: wrap 且存在多行时调节行间距，单行无效。
父容器高度怎么设才靠谱
高度不是“有没有”，而是“浏览器能否准确计算”。最容易漏掉的环节：
- 父容器是 <body>？得同步加 html, body { height: 100%; margin: 0; }
- 用 height: 100%？祖先链上任意一级没设高，就会断掉
- 推荐优先用 min-height: 100vh：既保证初始视口内撑满，又允许内容超长时自然延展，避免被截断
- 别依赖 margin: auto “骗”高度——align-items 不吃这套，它只认真实可分配的交叉轴尺寸
子元素用了 position: absolute 还能居中吗
不能。position: absolute 的元素已脱离文档流，不再是 Flex 项目，justify-content 和 align-items 对它完全无效。此时看到的“不居中”，其实是它根本不在 Flex 的作用范围内。
PigX UI Pro 前端开发指南 - Vue 3 + TypeScript + Element Plus。当用户提到 PigX UI、PigX 前端、lgb-mgui 项目、Vue 3 企业级后台开发、Element Plus 后台开发时使用此技能。
若必须用绝对定位（比如 tooltip、浮层弹窗），改用：
- 父容器设 position: relative
- 子元素设 position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%)
- IE11 兼容需加前缀：-ms-transform: translate(-50%, -50%)
真正难调试的，往往不是代码写错，而是父容器高度在某一层悄悄塌陷了——它不报错，也不警告，只是静默失效。
立即学习“前端免费学习笔记（深入）”；
