无法在 CSS Grid 中水平居中元素 [重复]答案

【问题标题】：Cannot horizontally center elements in CSS Grid [duplicate]无法在 CSS Grid 中水平居中元素 [重复]
【发布时间】：2022-02-09 19:01:17
【问题描述】：

我有一个这样的 CSS Grid，我希望能够将子元素水平居中。例如，在这张图片中，我希望看到“女王”出现在中间而不是左侧。

尝试使用align-items: center 和justify-content: center 不起作用。我该怎么办？

这是我用于网格（父级）的 CSS (scss)：

display: grid;
gap: 1rem 0;
grid-template-columns: 1fr;

--node-min-width: 235px;

@media (min-width: 576px){
   grid-template-columns: repeat(auto-fit, minmax(var(--node-min-width), 1fr));
}

【问题讨论】：

我不认为你可以用网格来实现。

标签： html css sass

【解决方案1】：

使用 flex 容器，您可以使用项目上的 flex 属性来操纵它们的大小

这是使类似情况起作用的最少代码

.element {
  background:darkgrey;
  color:white;
  text-align:center;
  margin-top: 12px;
  flex:0 0 25%;
}

.grid {
  display: flex;
  flex-wrap: wrap;
  justify-content:center;
}

<div class="grid">
  <div class="element">rook</div>
  <div class="element">bishop</div>
  <div class="element">knight</div>
  <div class="element">king</div>
  <div class="element">queen</div>
</div>

【讨论】：