flexbox水平垂直居中需display: flex、justify-content: center和align-items: center三者配合，但父容器必须有可计算的交叉轴尺寸（如min-height: 100vh），否则align-items: center因交叉轴长度为0而静默失效；还需注意嵌套结构需逐层设置、主轴方向变化时属性作用互换、绝对定位元素不生效等问题。
Flexbox 实现水平垂直居中，核心就三行 CSS，但 90% 的失败不是写错属性，而是父容器没高度。
为什么 align-items: center 看起来没生效？
因为它的作用对象是“交叉轴”，而默认交叉轴是垂直方向——它需要一个可计算的垂直空间才能居中。如果父容器高度为 0（比如只写了 display: flex 却没设 height 或 min-height），浏览器根本不知道往哪中间放。
- 常见现象：
.box没动，还贴在左上角，控制台也无报错 - 检查点：用开发者工具选中父容器，看 computed 面板里
height和min-height是否为0px - 推荐写法：
min-height: 100vh（比height: 100vh更安全，内容超长时不会被截断） - 若父容器是
，必须同步加html, body { height: 100%; margin: 0; }
justify-content 和 align-items 的作用方向会变吗？
会，取决于 flex-direction。默认 flex-direction: row 时，justify-content 控水平、align-items 控垂直；一旦改成 column，两者角色互换。
- 不建议主动改主轴方向来“绕开”高度问题，容易混淆语义
- 如果真用了
flex-direction: column，仍想水平垂直居中，就得写成：justify-content: center（此时管垂直）、align-items: center（此时管水平） - 更稳妥的做法：保持
row，专注把父容器高度撑起来
子元素是绝对定位或嵌套多层，还能用吗？
不能直接用。Flex 对齐只对**弹性容器的直接子元素**生效，且该子元素必须在文档流中。
-
position: absolute或fixed的元素已脱离文档流，不再是 Flex Item，align-items对它完全无效 - 若 DOM 是
<div class="container"><div class="wrapper"><div class="box"></div></div></div>，则.box不受.container的align-items控制 - 解决方法：要么扁平化结构，要么让中间层（如
.wrapper）也加display: flex; justify-content: center; align-items: center;
真正卡住人的，从来不是“怎么写这三行 CSS”，而是花十分钟排查父容器的 margin、padding、height、overflow 甚至祖先元素的 display 是否意外干扰了高度计算——这些细节不显眼，却让 align-items: center 静默失效。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
