先记住这个答案
align-content 管 Grid 轨道组在块轴上的位置，justify-content 管行内轴上的位置。place-content 是它们的简写，两个值依次给 align-content、justify-content；只写一个值会用于两个轴。这些属性只有在容器内容盒与轨道组之间有可分配的额外空间时才容易看到效果，不能把它们当作网格项目内部居中的工具。
align-content管块轴轨道组justify-content管行内轴轨道组place-content先写块轴，再写行内轴- 没有多余空间就看不出对齐效果
两个轴分别做什么
通常横排文字页面里，行内轴近似水平、块轴近似垂直。固定宽度的列轨总宽比容器小时，justify-content: center 可以把整组列放到中间。固定高度的行轨总高比容器小时，align-content: center 可把整组行垂直居中。换成竖排书写模式后，物理方向会改变，因而应记住逻辑轴而不是死背“一个横、一个竖”。
.board {
display: grid;
width: 500px;
height: 300px;
grid-template-columns: 100px 100px;
grid-template-rows: 80px 80px;
place-content: center space-between;
}
/* 行轨整体在块轴居中，列轨沿行内轴分散 */若写 place-content: center，两轴都会居中。这里两列本身各 100px，多余水平空间分配到列轨之间；两行本身各 80px，整组行轨放在容器块轴中间。place-items 是另一组简写，控制每个项目在自己网格区域里的位置，不能与 place-content 混用。
为什么某些布局上不起作用
列模板用 1fr 1fr 时，弹性列已经分走行内轴自由空间，justify-content: space-between 通常没有剩余空间可分。容器高度由内容撑开、没有额外高度时，align-content: center 也不容易看到效果。先算轨道与 gap 的总尺寸，再比较容器内容盒尺寸，比反复调对齐值有效。
如果轨道总尺寸大于容器，对齐属性也不能替代溢出处理。固定列总宽 600px 放在 400px 的容器里，place-content: center 不会将每列压缩至 200px；要改轨道尺寸、允许换行或安排滚动。
容易答错的地方
- 把
place-content的参数顺序写反 - 两值依次是块轴的
align-content和行内轴的justify-content，不是先水平再垂直的固定顺序。 - 用
align-content让单个按钮在格子里居中 - 它移动轨道组。按钮在自己格子里的位置应由
align-items或align-self控制。
面试官还会怎么问？
place-content: center 等价于什么？
等价于两个轴的内容对齐都取 center，即 align-content: center 和 justify-content: center。
为什么 justify-content 没推动两条 1fr 列？
它们通常已占满行内轴可用空间，没有额外空间可分配。
怎样只调整一张项目的位置？
使用 align-self 或 justify-self，而不是改变整组轨道的内容对齐。
参考资料
示例用于理解所注明的运行环境与边界；延伸学习可结合原文中的更多案例。