Flexbox与Grid居中布局教程

小伙伴们对文章编程感兴趣吗？是否正在学习相关知识点？如果是，那么本文《Flexbox与Grid实现居中布局技巧》，就很适合你，本篇文章讲解的知识点主要包括。在之后的文章中也会多多分享相关知识点，希望对大家的知识积累有所帮助！

flexbox 居中需父容器设 display: flex、justify-content: center 和 align-items: center，并有明确高度；子元素不能脱离 flex 流；grid 居中用 place-items: center 更纯粹，不改变文档流；margin: auto 在 flex 中也可居中但优先级更高。

flexbox 实现单个子元素水平垂直居中

对父容器设置 display: flex，再用 justify-content: center 和 align-items: center 即可完成居中。这是最常用、兼容性足够（Chrome 29+/Firefox 28+/Safari 9+/Edge 12+）的方案。

注意点：

• 父元素必须有明确高度（比如 height: 300px 或 min-height: 100vh），否则 align-items: center 在无约束高度下可能无效
• 子元素不能设置 float、position: absolute 或 display: inline 等会脱离 flex flow 的属性，否则会被忽略居中逻辑
• 如果子元素是文字，且父容器未设 text-align: center，行内元素本身仍可能左对齐（但整体位置已居中）

div.container {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 400px;
  border: 1px solid #ccc;
}
<p>div.content {
width: 100px;
height: 100px;
background: #007bff;
}</p>

grid 实现单个子元素水平垂直居中

对父容器设 display: grid，配合 place-items: center —— 这是 justify-items 和 align-items 的简写，专为居中设计。它比 flex 更“纯粹”，不改变子元素的文档流语义，也无需担心 flex-direction 干扰。

适用场景：

• 父容器内容简单、结构固定（如模态框、加载图标容器）
• 需要同时控制多个子项的网格位置（后续扩展性强）
• 项目需支持现代浏览器（Chrome 57+/Firefox 52+/Safari 10.1+/Edge 16+），不需兼容 IE

常见错误：误用 place-content: center —— 它作用于整个网格容器的内容区域（包括多行多列间隙），不是针对单个子项；而 place-items 才真正控制子项自身对齐。

div.container {
  display: grid;
  place-items: center;
  height: 400px;
  border: 1px solid #ccc;
}
<p>div.content {
width: 100px;
height: 100px;
background: #28a745;
}</p>

flexbox 居中时遇到 margin auto 不生效？

当子元素是块级元素且父容器是 flex 时，margin: auto 在主轴和交叉轴上都有效——但它会覆盖 justify-content 和 align-items。也就是说，只要子元素没设固定尺寸，margin: auto 就能实现居中，而且优先级更高。

但要注意：

• 必须确保子元素没有设置 align-self（它会干扰交叉轴上的 margin: auto）
• 若子元素是 inline 或 inline-block，margin: auto 在 flex 容器中无效，必须先设 display: block
• 在老版本 Safari（margin: auto 在交叉轴方向可能失效，此时应回退到 align-items: center

grid 中多子元素如何分别居中？

如果父容器里有多个子元素，又希望每个都独立居中（比如卡片列表中的每张卡片内容），别用 place-items——它会让所有子项叠在一起。应该用 place-self: center 给每个子项单独设置。

更灵活的做法是定义显式网格线 + justify-self / align-self：

• justify-self: center 控制单个子项在列方向的位置
• align-self: center 控制单个子项在行方向的位置
• 两者合起来等价于 place-self: center

这时候父容器只需 display: grid，无需其他对齐声明，每个子项互不影响。

div.container {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 16px;
}
<p>div.card {
place-self: center; /<em> 每个 card 自己居中 </em>/
width: 120px;
height: 120px;
background: #6f42c1;
}</p>

实际项目中，flexbox 居中更轻量、容错率高；grid 居中更语义清晰、扩展性好。选哪个，取决于你是否需要后续添加网格布局能力，以及目标浏览器范围。IE11 不支持 grid 的居中语法，但支持 flex；如果必须兼容 IE11，就别碰 place-items。

文中关于的知识介绍，希望对你的学习有所帮助！若是受益匪浅，那就动动鼠标收藏这篇《Flexbox与Grid居中布局教程》文章吧，也可关注golang学习网公众号了解相关技术文章。