如何将CSS grid网格容器相对于整个页面水平居中

问题根因 #

你当前两个网格容器用的是inline-grid，属于行内级元素，默认margin: auto对行内级元素不生效，所以你给.grid-container加的自动边距没有起作用。

可行实现方案 #

这里提供3种可直接落地的方案，优先推荐方案1，改动最小无副作用： #

方案1：修改为块级网格+自适应宽度+自动外边距

不需要修改HTML结构，仅调整CSS即可：

.grid-container {
  display: grid; /* 把原来的inline-grid改成grid */
  grid-template-columns: auto auto auto auto auto auto auto auto auto;
  background-color: #c8a2c8;
  padding: 5px;
  text-align: center;
  margin: 0 auto; /* 保留原有auto边距 */
  width: fit-content; /* 新增：宽度自动适配网格内容 */
} 

.grid-container2 {
  display: grid; /* 把原来的inline-grid改成grid */
  grid-template-columns: 40px 40px 40px 40px 40px 40px 40px 40px 40px;
  background-color: #c8a2c8;
  padding: 5px;
  text-align: center;
  margin: 0 auto; /* 新增：左右自动边距实现居中 */
  width: fit-content; /* 新增：宽度自动适配网格内容 */
}

方案2：利用行内元素特性给父级加文本居中

如果你不想修改网格本身的inline-grid属性，可以给每个网格外层套一个父容器，给父容器加text-align: center即可：

<!-- 输入数独网格部分 -->
<div style="text-align: center;">
  <div class="grid-container">
    <!-- 原有内部元素不变 -->
  </div>
</div>

<!-- 答案网格部分 -->
<div style="text-align: center;">
  <div class="grid-container2">
    <!-- 原有内部元素不变 -->
  </div>
</div>

方案3：父容器用Flex布局统一控制

给两个网格的共同父容器.main设置Flex属性，一次性让两个网格居中：

.main {
  display: flex;
  flex-direction: column;
  align-items: center;
}
/* 如果需要.main内的文本保持左对齐，单独给文本元素加以下属性即可 */
.main h2, .main p {
  align-self: flex-start;
}

内容的提问来源于stack exchange，提问作者Juan Carlos Ortiz