没有项目的中心网格div居中

Question

这是我的代码片段：

.grades_dashboard_m {}

.three_separation {
  width: 100%;
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  grid-gap: 60px;
}

.grades_dashboard_box {
  height: 130px;
  width: 160px;
  background-color: #000000;
  color: #ffff;
}

<div class="grades_dashboard_m" id="co_1">
  <div class="three_separation">
    <div class='grades_dashboard_box'>
      <h1>12</h1>
    </div>

    <div class='grades_dashboard_box'>
      <h1>12</h1>
    </div>

    <div class='grades_dashboard_box'>
      <h1>12</h1>
    </div>
  </div>
</div>

如你所见，网格div（grades_dashboard_m）不在grades_dashboard_m中心。如何在没有grades_dashboard_m元素中心的情况下居中？我已经尝试过了：

.grades_dashboard_m {
  display:flex;
  justify-content:center;
  align-items:center;
}

但没有成功。

编辑：我发现这不是问题所在。问题是3个网格的内容不居中。但是如何集中网格的内容？

Answer 1

只需将qazxsw poi应用于qazxsw poi就像这样

margin: 0 auto;

这应该使元素居中而不是文本。

Answer 2

纯CSS网格解决方案

简而言之，不要使用.grades_dashboard_box中心网格儿童使用

.grades_dashboard_box {
  margin: 0 auto;
}

。

margin: 0 auto

关于来自justify-items: center的

.three_separation {
  …
  justify-items: center;
}

的几句话：

在网格布局中，它将内联轴上的网格区域内的项目对齐

演示

justify-items

MDN