如何在CSS多列布局中将单列居中

我有一个使用 CSS 多列布局的元素来显示项目列表。

<div style="column-width: 300px; column-count: 3; text-align: center;">
    <div>Item 1</div>
    <div>Item 2</div>
    <div>Item 3</div>
    <div>Item 4</div>
    <div>Item 5</div>
    <div>Item 6</div>
</div>

该示例列表正确显示为三列，每列包含两个项目，每个项目都位于其列的中心。

但是，当我有一个仅包含一个项目的列表时，该项目显示在第一列中，而第二列和第三列的空间仍为空。

有什么方法可以使单列在父元素中居中吗？同样，如果我有一个仅包含两个项目的列表，是否有办法使两个填充的列在父元素内居中？

本质上，我想要的是，如果有三个或更多项目，则显示三列，但如果只有一两个项目，则仅显示显示这些项目所需的列数，而不保留未使用的列空间。

EDIT

问题是当我有一个只有一项的列表时，例如：

<div style="column-width: 300px; column-count: 3; text-align: center;">
    <div>Item 1</div>
</div>

单个项目位于第一列中，而第二列和第三列所在的空间仍然保留，即使那里没有内容。

我本来不打算回答这个问题，因为我面临的问题是不同的。但后来我注意到这里唯一的答案抛出了columns并切换到flexbox，它做了完全不同的事情，使问题没有得到解答。

我已经做了一个实现，您可以在下面找到。我还添加了一个fourth专栏，以便更清楚我在做什么:nth-child(n):nth-last-child(n)CSS 的一部分。

你可以看到有 3 个奇数选择器，它们都添加了一个inset位于左侧，以便所有子项都居中。您可以根据需要不断添加这些选择器。您需要的选择器数量就是列的数量 - 1。

当选择 3 列时，您可以删除最后一个看起来奇怪的选择器。
如前所述，我添加了第四列，以便您可以看到需要应用的选择器模式才能使其正常工作。

.parent {
  --columns: 4;
  --gap:     1em;
  column-count: var(--columns);
  column-gap:   var(--gap);
}

.child {
  position: relative;
  break-inside: avoid;
  break-inside: avoid-column;
}

.child:only-child {
  left: calc((100% + var(--gap)) * (var(--columns) - 1) / 2);
}

.child:nth-child(1):nth-last-child(2),
.child:nth-child(2):nth-last-child(1) {
  left: calc((100% + var(--gap)) * (var(--columns) - 2) / 2);
}

.child:nth-child(1):nth-last-child(3),
.child:nth-child(2):nth-last-child(2),
.child:nth-child(3):nth-last-child(1) {
  left: calc((100% + var(--gap)) * (var(--columns) - 3) / 2);
}

/* Prettifications only */

body {
  margin: 0;
  font-family: sans-serif;
}

.parent {
  margin: var(--gap);
  text-align: center;
}

.child {
  padding: 8px 0;
  background-color: rgba(127,127,127,.1);
  outline: 1px solid black;
  outline-offset: -1px;
}

<div class="parent">
    <div class="child">1</div>
</div>
<div class="parent">
    <div class="child">1</div>
    <div class="child">2</div>
</div>
<div class="parent">
    <div class="child">1</div>
    <div class="child">2</div>
    <div class="child">3</div>
</div>
<div class="parent">
    <div class="child">1</div>
    <div class="child">2</div>
    <div class="child">3</div>
    <div class="child">4</div>
</div>

不过，这有一个很大的缺点。它本身不再响应了！

我已经删除了column-width，这也可能使这个实现对您的情况毫无用处，因为column-widthproperty 以前只负责使整个系统响应。但是，如果您可以手动添加断点，那么我认为这是实现居中多列布局的唯一方法之一。

添加断点最好按如下方式完成：

@media all and (min-width: 500px) {
  .parent { --columns: 2 }

  .child:only-child {
    left: calc((100% + var(--gap)) * (var(--columns) - 1) / 2);
  }
}

@media all and (min-width: 600px) {
  .parent { --columns: 3 }

  .child:nth-child(1):nth-last-child(2),
  .child:nth-child(2):nth-last-child(1) {
    left: calc((100% + var(--gap)) * (var(--columns) - 2) / 2);
  }
}

@media all and (min-width: 700px) {
  .parent { --columns: 4 }

  .child:nth-child(1):nth-last-child(3),
  .child:nth-child(2):nth-last-child(2),
  .child:nth-child(3):nth-last-child(1) {
    left: calc((100% + var(--gap)) * (var(--columns) - 3) / 2);
  }
}

这样，样式仅在可以使用时才应用needed。另外：请记住按此顺序保留媒体查询。媒体查询越高，则越高--columns多变的必须.