在CSS Grid布局里，让容器内的元素实现水平与垂直方向的居中，是前端开发中非常常见的需求。很多初学者习惯用传统的flex或者绝对定位去处理，但实际上Grid自带的justify-content与align-content属性，能够在不修改子元素样式的情况下，纯粹通过容器级别的对齐控制完成居中。这两个属性分别控制网格轨道在水平与垂直方向上的剩余空间分配方式，当容器比内容大时，设定为center即可将整体网格推到正中央。
一、justify-content与align-content的基础概念
justify-content在Grid容器中定义的是网格轨道沿着行轴（也就是水平方向，默认writing-mode下）的对齐方式。它的值包括start、end、center、stretch、space-between、space-around、space-evenly等。当网格总宽度小于容器宽度时，这些属性决定多余空间怎么分配。同理，align-content控制的是网格轨道在列轴（垂直方向）上的对齐，行为逻辑与justify-content完全对称。
需要明确的是，这两个属性作用的对象是“网格轨道整体”，而不是某一个具体的grid item。如果我们在容器里显式定义了grid-template-columns: 200px;且容器宽400px，那么轨道本身只有200px，剩余空间由justify-content决定放在左边、右边还是中间。只有当轨道没有占满容器时，center才会产生肉眼可见的居中位移。
二、结合使用实现水平垂直居中
最简单的场景是容器里只有一块内容，或者所有子元素被合并在单一轨道中。此时给容器同时写上justify-content: center;和align-content: center;，就能让网格整体在容器中水平垂直居中。下面是一段基础示例：
.container {
display: grid;
width: 500px;
height: 400px;
/* 轨道尺寸小于容器，才会看到居中效果 */
grid-template-columns: 200px;
grid-template-rows: 100px;
justify-content: center;
align-content: center;
border: 1px solid #ccc;
}
.item {
background: #42b983;
}
上述代码中，容器宽高固定，内部轨道只有200×100，剩余空间分别由这两个属性分配到两侧，最终item被夹在正中。这种方式比给item加margin: auto更直观，也避免了嵌套flex的额外复杂度。
如果容器本身没有固定高度，比如高度由内容撑开，那么align-content其实没有多余垂直空间可以分配，这时候垂直居中就不会生效。因此使用这两个属性做整体居中时，务必保证容器在对应轴上有确定的、大于轨道尺寸的空间。
三、与place-content简写的等价写法
为了少写代码，CSS提供了place-content这一简写属性，它按顺序设置align-content和justify-content。当我们写place-content: center;时，等价于两者都为center。示例如下：
.wrap {
display: grid;
width: 600px;
height: 300px;
grid-template-columns: 300px;
grid-template-rows: 80px;
place-content: center;
}
这种写法在需要双轴一致对齐时非常高效。不过要注意浏览器兼容性，虽然现代浏览器都已支持，但在一些老旧嵌入式浏览器中仍需展开写全称。另外，如果未来需要某一轴单独调整，拆开写会更利于维护。
四、常见误区与对比
有人会把justify-content/align-content和justify-items/align-items搞混。后者控制的是网格单元格内子项的对齐，而前者控制轨道在容器内的对齐。如果用了grid-template-columns: 1fr;让轨道撑满容器，那么justify-content设center也不会有变化，因为已经没有剩余空间。此时应该用justify-items: center让item在单元格内居中。
| 属性 | 作用对象 | 典型使用场景 |
|---|---|---|
| justify-content | 网格轨道（水平） | 轨道总宽小于容器宽时整体左右移 |
| align-content | 网格轨道（垂直） | 轨道总高小于容器高时整体上下移 |
| justify-items | 单元格内子项（水平） | 轨道占满但子项要居中 |
| align-items | 单元格内子项（垂直） | 单元格内垂直居中 |
从表中可以看出，当你的目标是“整个网格内容块在容器正中”时，选justify-content加align-content；当目标是“每个格子里的元素居中”时，选items系列。混淆二者是导致调试半小时没反应的主因。
五、实际项目中的完整demo
下面给出一个HTML与CSS结合的完整例子，模拟一个卡片在页面中央显示的布局。容器使用viewport单位获得屏幕空间，内部轨道固定尺寸，通过双center实现稳定居中。
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<style>
body {
margin: 0;
}
.box {
display: grid;
width: 100vw;
height: 100vh;
grid-template-columns: 320px;
grid-template-rows: 180px;
justify-content: center;
align-content: center;
}
.card {
background: #3498db;
color: #fff;
display: flex;
align-items: center;
justify-content: center;
border-radius: 8px;
}
</style>
</head>
<body>
<div class="box">
<div class="card">我是居中卡片</div>
</div>
</body>
</html>
这个例子中，.box作为Grid容器占满屏幕，轨道尺寸远小于视口，因此justify-content与align-content的center值会把.card推到视口正中央。卡片自身再用flex做内部文字居中，层级清晰，不需要任何绝对定位。
总结来看，Grid的align-content与justify-content结合是实现容器级居中的标准手段。只要理清轨道空间与容器空间的关系，避开与items属性的误用，就能用极少代码达成稳定可靠的布局效果。
CSS_Gridalign-contentjustify-content修改时间：2026-08-09 19:12:42