Flexbox和Grid垂直居中技巧

golang学习网今天将给大家带来《Flexbox与Grid实现元素垂直居中方法》，感兴趣的朋友请继续看下去吧！以下内容将会涉及到等等知识点，如果你是正在学习文章或者已经是大佬级别了，都非常欢迎也希望大家都能给我建议评论哈~希望能帮助到大家！

垂直居中用 align-items: center（flex）或 place-items: center（grid）；父容器须设 display: flex/grid 和明确高度（如 min-height: 100vh），否则居中失效。

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;
}
<p>.item {
/<em> 不需要 margin 或 transform </em>/
}</p>

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学习网公众号了解相关技术文章。