居中对齐网格元素[重复]答案

【问题标题】：Center align grid elements [duplicate]居中对齐网格元素[重复]
【发布时间】：2019-04-24 11:26:09
【问题描述】：

我一直在尝试使一个非常简单的 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>

【问题讨论】：

试试text-align: center;w3schools.com/cssref/pr_text_text-align.asp
@MoHa 你试过答案了吗？您可以accept an answer 将此问题标记为已关闭。（您可以对多个答案进行投票，但前提是您的声望点数达到 15 个以上）。欢迎来到 StackOverflow..
CSS Grid 不仅仅像这样自动居中。有需要尊重的列轨道。像这样的简单居中在 flex 中有效，但在网格中无效。

标签： css grid alignment

【解决方案1】：

您有一个固定的最小尺寸。 grid-template-columns: repeat(auto-fill,minmax(300px, 1fr));

当您要求网格调整小于 300 像素的大小时，它会换行。

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

【讨论】：

【解决方案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>

【讨论】：

使用 css calc(min% - padding) 来解决这个问题，而不是创建任意百分比
@BryceHowitson 是的，这是最准确的解决方案。不过，我的回答旨在作为指导，以解释为什么不将其设置为恰好三分之一。毕竟，SO 并不是一种代码编写服务。不过感谢您的补充。

【解决方案3】：

好吧，我最终找到了一个解决方案，非常简单但真的不优雅......：我刚刚使用了 margin-left:50%;在第三个元素上。

所以它有效，但如果有人有更优雅的解决方案，我会很高兴学习它。

再次感谢

【讨论】：