如何在CSS Grid中垂直对齐<figure>元素

问题原因 #

你之前尝试的display: flex; align-items: center;没生效，核心原因有两个：

• 你的.grid容器的父元素（html、body）默认没有占据整个视口的垂直高度，没有足够的空间让.grid实现页面级的垂直居中。
• 错误地给.grid（本身是Grid布局容器）添加Flex布局属性，Grid布局有自己的垂直对齐属性，不需要切换成Flex。

修复方案 #

要实现整个Grid容器在页面中垂直居中，同时保证Grid内部每行的元素也垂直对齐，需要做以下修改：

修改后的CSS代码 #

/* 先让html和body占据整个视口高度 */
html, body {
  height: 100%;
  margin: 0;
  padding: 0;
  /* 用Flex布局让body的子元素（.grid）垂直水平居中 */
  display: flex;
  justify-content: center;
  align-items: center;
}

.grid {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr 1fr;
  gap: 2%;
  padding: 1%;
  /* 如果要让Grid内部的每个单元格里的内容垂直居中，添加下面这行 */
  align-items: center;
}

figure.item {
  border: 1px solid #000;
  text-align: center;
  margin: 0;
  padding: 0;
}

img {
  width: 100%;
}

.caption {
  /* visibility: hidden; */
}

img,
figcaption {
  transition-duration: 0.2s;
  transform-origin: 50% 50%;
  opacity: 0.5;
}

:checked+label img,
:checked+label figcaption {
  opacity: 1;
}

input[type=checkbox] {
  display: none;
}

说明 #

1. 页面级垂直居中：通过给html和body设置height:100%，让它们填满整个浏览器视口，再用Flex布局的justify-content: center（水平居中）和align-items: center（垂直居中），让.grid容器在页面中间显示。
2. Grid内部项对齐：给.grid添加align-items: center，这是Grid布局的属性，能让每一行的figure.item在单元格内垂直居中，即使后续添加新行也能生效。
3. 移除了多余的Flex属性设置，保留Grid布局本身的特性，避免布局冲突。

替代方案（用Grid实现页面居中） #

如果你不想用Flex，也可以给body用Grid布局实现同样的效果：

html, body {
  height: 100%;
  margin: 0;
  padding: 0;
  display: grid;
  place-items: center;
}

内容的提问来源于stack exchange，提问作者Maurice