如何用CSS实现Flexbox水平垂直居中？-css教程-PHP中文网

父容器高度为0导致align-items: center静默失效；需确保父容器有可计算高度，如min-height: 100vh，并注意flex-direction变化时justify-content与align-items作用轴互换，且align-items仅对直接子元素生效。

如何用css实现flexbox水平垂直居中？

父容器没高度，`align-items: center` 就是静默失效

Flex 水平垂直居中写三行 CSS 很容易：display: flex、justify-content: center、align-items: center。但 90% 的“没效果”不是属性写错，而是父容器在浏览器里算出来高度为 0px。

原因很简单：align-items 控制的是交叉轴（默认是垂直方向），它需要一个可计算的交叉轴尺寸才能居中。如果父容器没显式设高，又没内容撑开，它的高度就是 0 —— 浏览器根本不知道“中间”在哪。

用开发者工具选中父容器，看 Computed 面板里的 height 和 min-height 是否为 0px
推荐写 min-height: 100vh，比 height: 100vh 更安全：内容超长时不会被截断
如果父容器是，必须同步加 html, body { height: 100%; margin: 0; }，否则 100vh 会失效

`justify-content` 和 `align-items` 的作用方向会随 `flex-direction` 变

默认 flex-direction: row 时，justify-content 管水平，align-items 管垂直；一旦改成 column，两者角色互换——justify-content 开始管垂直，align-items 管水平。

这不是 bug，是 Flex 轴心逻辑的自然体现。但主动改主轴方向来“绕开”高度问题，容易让语义混乱、后续维护踩坑。

CSS婚礼策划服务机构宣传网站模板

CSS婚礼策划服务机构宣传网站模板是一款适合提供婚礼策划和婚庆服务机构宣传网站模板下载。提示：本模板调用到谷歌字体库，可能会出现页面打开比较缓慢。

下载

保持 flex-direction: row，专注把父容器高度撑起来，是最稳妥的做法
真要用 column，仍想居中，就得写成：justify-content: center（此时控垂直）、align-items: center（此时控水平）
别依赖 flex-direction 切换去“修复”居中失败，先查高度

绝对定位子元素或嵌套多层，`align-items` 不起作用

align-items 只对弹性容器的**直接子元素**生效，且该子元素必须在文档流中。一旦加了 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;
别指望靠一层 display: flex “穿透”多层 DOM 生效

比起写对属性，更花时间的是排查干扰高度的隐性因素

真正卡住人的，从来不是“怎么写这三行 CSS”，而是花十分钟排查：margin 折叠、padding 没生效、overflow: hidden 截断了内容、祖先元素的 display: inline 或 float 意外重置了块级上下文……这些细节不显眼，却让 align-items: center 静默失效。

建议打开开发者工具，从最外层 html 往下逐层检查 computed height，而不是只盯着目标容器本身。