Grid容器中元素如何实现水平垂直居中_align-content与justify-content结合
答案：使用 justify-content 和 align-content 可实现网格整体居中。justify-content 控制水平对齐，align-content 控制垂直对齐，二者作用于容器且需容器有多余空间，适用于多轨道网格整体居中，如示例中200×200网格在500×500容器内居中；单个项目居中应使用 justify-items、align-items 或 margin: auto。
在CSS Grid布局中，要让Grid容器内的元素实
现水平垂直居中，关键在于正确使用 justify-content 和 align-content 属性。这两个属性分别控制网格轨道（grid tracks）在主轴和交叉轴上的对齐方式。
理解 justify-content 与 align-content
justify-content 控制网格在行轴（通常是水平方向）上的对齐方式。
align-content 控制网格在列轴（通常是垂直方向）上的对齐方式。
注意：这两个属性作用于容器，影响的是整个网格轨道的分布，而不是单个网格项的内部对齐。
若想通过这两个属性实现子元素的居中，前提是容器存在多余空间，并且网格轨道没有占满整个容器。
如何结合使用实现居中
假设你有一个Grid容器，其中定义了若干行和列，但总尺寸小于容器大小，可以通过以下设置让整个网格内容块居中：
- justify-content: center; —— 水平居中网格轨道
- align-content: center; —— 垂直居中网格轨道
示例代码：
.container {display: grid;
grid-template-columns: 100px 100px;
grid-template-rows: 100px 100px;
width: 500px;
height: 500px;
justify-content: center;
align-content: center;
}
此时，由两个100px列和两个100px行组成的200×200的网格整体在500×500的容器中水平垂直居中。
注意事项
这种居中方式适用于多轨道网格整体居中，不适用于单个项目在单元格内的居中。如果只是单个网格项需要居中，应考虑：
- 使用 justify-items / align-items 控制项目在单元格内的对齐
- 或对单个项目使用 margin: auto
- 或使用 place-content: center; 简写属性（等同于 align-content 和 justify-content 都设为 center）
基本上就这些。align-content 与 justify-content 结合适合“网格整体”居中，不是“内容”居中，理解这一点就能避免误用。
