没有项目的居中网格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

只需将margin: 0 auto;应用于.grades_dashboard_box 喜欢这个

.grades_dashboard_box {
  margin: 0 auto;
}

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

Answer 2

纯CSS网格解决方案

简而言之，不要使用margin: 0 auto来使子网格居中，而使用justify-items: center。

.three_separation {
  …
  justify-items: center;
}

关于MDN中的justify-items的几句话：

  

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

演示

.grades_dashboard_m {}

.three_separation {
  width: 100%;
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  grid-gap: 60px;
  justify-items: center;  /* <-- Added */
}

.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>