如何在CSS中垂直居中Grid容器并保持响应式？

希望页面中的方格网格在x轴、y轴都居中，目前已实现x轴居中，但y轴无法垂直居中，且需保持布局响应式。尝试创建margin-help类的div解决，但未生效。

当前布局效果：

要实现网格双轴居中，核心是让容器拥有垂直方向的可用空间，并通过flex布局对齐子元素。以下两种方法都能实现需求且保持响应式：

方式一：简化布局，直接用body作为容器 #

将body改为flex布局，移除无效的padding-top: auto和padding-bottom: auto（padding不支持auto值），同时无需额外的margin-help容器：

修改后的CSS：

@font-face {
  font-family: This Is The Future;
  src: url(fonts/This\ Is\ The\ Future.ttf);
}

html,
body {
  min-height: 100%;
}

body {
  margin: 0;
  text-align: center;
  background-color: black;
  font-family: This Is The Future;
  display: flex;
  height: 100vh;
  align-items: center; /* 垂直居中 */
  justify-content: center; /* 水平居中 */
}

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

.squares {
  background-color: white;
  max-width: 100px;
  width: 15vw;
  max-height: 100px;
  height: 15vw;
  display: flex;
  align-items: center;
  justify-content: center;
}

对应的HTML（移除冗余容器）：

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>SENSUS</title>
    <link href="styles.css" rel="stylesheet" />
  </head>
  <body>
    <div class="grid">
      <div class="squares" id="a1"></div>
      <div class="squares" id="b1"></div>
      <div class="squares" id="c1"></div>
      <div class="squares" id="d1"></div>
      <div class="squares" id="a2"></div>
      <div class="squares" id="b2"></div>
      <div class="squares" id="c2"></div>
      <div class="squares" id="d2"></div>
      <div class="squares" id="a3"></div>
      <div class="squares" id="b3"></div>
      <div class="squares" id="c3"></div>
      <div class="squares" id="d3"></div>
      <div class="squares" id="a4"></div>
      <div class="squares" id="b4"></div>
      <div class="squares" id="c4"></div>
      <div class="squares" id="d4"></div>
    </div>
    <script src="script.js"></script>
  </body>
</html>

方式二：修复margin-help容器的样式 #

如果保留margin-help容器，需要让它占满body的高度，并启用flex布局来居中内部网格：

修改后的CSS：

@font-face {
  font-family: This Is The Future;
  src: url(fonts/This\ Is\ The\ Future.ttf);
}

html,
body {
  min-height: 100%;
}

body {
  margin: 0;
  text-align: center;
  background-color: black;
  font-family: This Is The Future;
  height: 100vh;
}

.margin-help {
  display: flex;
  height: 100%; /* 占满父容器高度 */
  align-items: center; /* 垂直居中 */
  justify-content: center; /* 水平居中 */
}

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

.squares {
  background-color: white;
  max-width: 100px;
  width: 15vw;
  max-height: 100px;
  height: 15vw;
  display: flex;
  align-items: center;
  justify-content: center;
}

关键说明 #

• 之前padding-top: auto和padding-bottom: auto是无效写法，padding不支持auto值，这是y轴无法居中的原因之一。
• 垂直居中的前提是容器有明确高度（比如100vh），再通过flex的align-items: center实现对齐。
• 两种方法都能保持响应式：网格列数用repeat(4, auto)自适应，方块尺寸用vw单位随屏幕宽度缩放。

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