Flexbox和Grid垂直居中技巧

本文深入解析了如何使用 Flexbox 和 CSS Grid 实现可靠、现代的垂直居中布局，直击开发者高频踩坑点：强调父容器必须设置 `display: flex` 或 `display: grid` 并配合明确高度（推荐 `min-height: 100vh` 或更稳健的 `100dvh`），澄清 `align-items: center`（非 `justify-content`）才是 Flex 垂直居中的关键，而 Grid 中一行代码 `place-items: center` 即可优雅解决，且天然支持多子项独立居中；同时对比二者在多元素、换行、堆叠场景下的行为差异，指出 Flex 更适合一维流式居中，Grid 在二维布局中更具扩展性，并贴心提醒 iOS Safari 的 `vh` 兼容陷阱、浮动/定位导致容器“失高”等隐蔽问题，辅以实用调试技巧，帮你彻底告别居中失效的困扰。

flexbox 垂直居中：用 align-items 还是 justify-content？

垂直居中靠 align-items: center，但前提是父容器设了 display: flex 且有明确高度（或能撑开高度）。justify-content: center 管水平，别混用。

常见错误是父容器没设高度，比如只写了 height: 100% 却没给祖先元素设高，结果子元素“塌”在顶部。推荐用 min-height: 100vh 保底。

实操建议：

• 父容器必须加 display: flex 和 align-items: center
• 单行内容可加 justify-content: center 实现水平+垂直居中
• 若子元素是块级且需自适应宽高，不用额外设 margin: auto
• 避免对子元素设 margin-top: 50% 或 transform: translateY(-50%) —— 这是老办法，flex 下多余

.container {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 100vh;
}
.item {
/ 不需要 margin 或 transform /
}

grid 垂直居中：place-items 一行解决

place-items: center 是 justify-items 和 align-items 的简写，对 grid 容器内所有直接子项生效。它比 flex 更“无感”——不需要关心子项是否单个、是否换行。

注意：它只作用于 grid 子项（即 grid-item），不是后代元素。如果中间嵌套了一层 div，那层必须也设为 display: contents 或直接去掉。

实操建议：

• 父容器设 display: grid + place-items: center 即可
• 无需定义 grid-template-rows 或 grid-template-columns，自动创建隐式网格
• 若需兼容 IE，grid 不可用，得降级到 flex 或绝对定位
• 想只居中某一个子项（而非全部），改用 justify-self: center; align-self: center

.container {
  display: grid;
  place-items: center;
  min-height: 100vh;
}

flex 与 grid 居中行为差异：子元素换行时表现不同

flex 默认是单行布局（flex-wrap: nowrap），多个子项会横向挤在一起；grid 默认是多行网格，每个子项占一个格子。这意味着：

• 多个子项用 flex 居中：它们并排居中，整体水平居中、垂直居中
• 多个子项用 grid + place-items: center：每个子项各自在自己的网格单元里居中，视觉上可能错落（除非显式设 grid-template-columns: repeat(1, 1fr)）
• 如果要让多个子项“堆成一列”再整体居中，flex 更直观（加 flex-direction: column）；grid 则需配合 grid-auto-flow: column 或明确行列定义

性能上无明显差别，但 grid 在复杂二维布局中扩展性更强；flex 更适合一维流式场景。

容易被忽略的坑：父容器未脱离文档流或含浮动

如果父容器本身是浮动元素（float: left）、绝对定位（position: absolute）但没设宽高，或者被 overflow: hidden 截断，flex/grid 的居中会失效——因为容器“不可见高度”。

另一个高频问题：使用 vh 单位时，页面有滚动条导致视口高度计算偏差。iOS Safari 对 100vh 的处理尤其不稳定，建议用 100dvh（如支持）或 JS 动态设置高度。

调试建议：

• 在浏览器开发者工具中检查父容器的 computed height 是否大于 0
• 临时加 outline: 1px solid red 看父容器是否“存在”
• 禁用所有浮动、定位、overflow 相关样式，逐步排查

真正卡住的时候，往往不是居中逻辑错了，而是容器根本没拿到高度。

本篇关于《Flexbox和Grid垂直居中技巧》的介绍就到此结束啦，但是学无止境，想要了解学习更多关于文章的相关知识，请关注golang学习网公众号！