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

Question

我有一个使用 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>

示例列表正确显示为三列，每列包含两个项目，每个项目都在其列内居中。

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

有没有办法使单列在父元素内居中？ 同样，如果我只有两个项目的列表，有没有办法让两个填充的列在父元素内居中？

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

编辑

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

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

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

Answer 1

我创建了一个小提琴： https : //jsfiddle.net/Lvtya3qL/

<div class="parent">
    <div class="child">Item 1</div>
    <div class="child">Item 2</div>
    <div class="child">Item 3</div>
    <div class="child">Item 4</div>
    <div class="child">Item 5</div>
    <div class="child">Item 6</div>
    <div class="child">Item 7</div>
</div>

.parent{
  display:flex;
  width: 300px;
  flex-wrap: wrap;
  justify-content: center;
}

.child {
  width: 100px;
}

Answer 2

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

我做了一个你可以在下面找到的实现。 我还添加了第四列，以便更清楚我在 CSS 的:nth-child(n):nth-last-child(n)部分所做的事情。

您可以看到有 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-width属性以前全权负责使整个响应。 但是，如果您可以手动添加断点，那么我认为这是实现居中多列布局的唯一方法之一。

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

@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);
  }
}

这样，样式仅在需要时应用。 另外：请记住按此顺序保留媒体查询。 媒体查询越高， --columns变量必须越高。