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

关于 justify-items 来自 MDN 的几句话：

In grid layouts, it aligns the items inside their grid areas on the inline axis

演示

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

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

Center grid div without items get centered

html

css

center

css-grid

纯，CSS网格解决方案

演示