居中对齐网格元素

Question

我一直在尝试让一个非常简单的CSS网格居中，但似乎行不通 - 我希望当视口变得太小时，网格元素仍保持居中，但其中一个会到下一行（它们在之前和之后都是居中的）。

有人能告诉我我做错了什么吗？

.Listing {
  list-style: none;
  display: grid;
  grid-gap: 10px;
  padding: 10px 40px;
  grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
  padding-bottom: 30px;
  background-color: #71F;
  justify-content: center;
}

.Listing li {
  background-color: #F7F;
  border: solid 1px #dddddd;
  height: 150px;
}

<div id="Text">
  <ul class="Listing">
    <li>
      <div></div>
    </li>
    <li>
      <div></div>
    </li>
    <li>
      <div></div>
    </li>
  </ul>
</div>

- Mo Ha

---

尝试使用 text-align: center; https://www.w3schools.com/cssref/pr_text_text-align.asp - Dom

@MoHa 你试过这些答案了吗？你可以接受一个答案来标记此问题已关闭。（你可以给多个答案点赞，但只有当你获得15分以上的声望时才能进行点赞）。欢迎来到StackOverflow。 - Rachel Gallen

CSS Grid并不像那样自动居中。需要遵守列轨道。简单的居中在flex中可以工作，但在grid中不行。 - Michael Benjamin

Answer 1

您有一个固定的最小尺寸。 grid-template-columns: repeat(auto-fill,minmax(300px, 1fr)); 当您要求网格缩小至小于300px时，它将换行。

将最小尺寸更改为相对单位，例如%或vh，以使其可缩放。

- Bryce Howitson

Answer 2

我建议使用百分比，就像Bryce上面建议的那样。但是请记住，在设置宽度时要考虑到填充和边距。例如，在这个例子中，您有3个列表项希望在一行上显示，据我所知。设置动态宽度为33%似乎很合理，但是由于填充会使宽度稍微偏差，因此我会/已经将其设置为31%。 试试这个：

.Listing {
  list-style: none;
  display: grid;
  grid-gap: 10px;
  padding: 10px 30px 30px 20px;
  grid-template-columns: repeat(auto-fill, minmax(31%, 1fr));
  background-color: #71F;
  justify-content: center;
}

.Listing li {
  background-color: #F7F;
  border: solid 1px #dddddd;
  height: 150px;
}

<div id="Text">
  <ul class="Listing">
    <li>
      <div>One</div>
    </li>
    <li>
      <div>Two</div>
    </li>
    <li>
      <div>Three</div>
    </li>
  </ul>
</div>

- Rachel Gallen

---

使用CSS的calc(min% - padding)来解决这个问题，而不是创建任意百分比。 - Bryce Howitson

@BryceHowitson 是的，那是最准确的解决方案。我的回答旨在作为指南，解释为什么不要将其设置为恰好三分之一。因此，SO并不意味着成为一个代码编写服务。感谢您的补充说明。 - Rachel Gallen

Answer 3

好的，最终我找到了一个解决方案，相当简单但并不优雅...：我只是在第三个元素上使用了margin-left:50%。

所以它能够工作，但如果有更加优雅的解决方案，我会很高兴学习。

再次感谢。

- Mo Ha