如何使用align-content居中Grid容器？为何设置后未生效？

数据老陈

2026-8-18

解决Grid容器在页面水平垂直居中的问题

问题原因

你设置的.gallery虽已添加align-content:center和height:100vh，但它被包裹在未设置高度和居中样式的.container中，导致.gallery仅能在自身容器内垂直居中图片，而整个Grid容器并未在页面垂直方向居中。此外，body默认的margin可能会引发不必要的滚动条，干扰布局效果。

解决方法

方法一：通过Flex布局让外层容器居中Grid

给.container设置占满视口的高度，并启用Flex布局实现内部Grid容器的双方向居中：

/* 重置body默认margin，避免滚动条和布局偏移 */
body {
  margin: 0;
}

.container {
  height: 100vh;
  display: flex;
  justify-content: center; /* 水平居中 */
  align-items: center;     /* 垂直居中 */
}

.gallery {
  display: grid;
  grid-template-columns: repeat(4, 10vw);
  grid-template-rows: repeat(4, 300px);
  grid-gap: 10px;
}

.img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

方法二：通过Grid布局让外层容器居中Grid

利用Grid的place-content属性快速实现双方向居中，代码更简洁：

body {
  margin: 0;
}

.container {
  height: 100vh;
  display: grid;
  place-content: center; /* 同时实现水平和垂直居中 */
}

.gallery {
  display: grid;
  grid-template-columns: repeat(4, 10vw);
  grid-template-rows: repeat(4, 300px);
  grid-gap: 10px;
}

.img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}