Css 如何将项目与列数居中对齐？

我有一个无序的列表，其中动态填充了从1到任意值的列表项。此列表使用列计数设置为列样式。如果列表中有3个或更多项目，则一切正常。但当有两个或只有一个项目时，我想把它们放在中间。 HTML:

演示：

这是一张图片：

---

我会将其包装在包装器中，并将自动边距应用于左/右或签出

---

为什么不把列表放在“图标”的中央呢？演示比图片好得多。你有没有考虑过让添加动态项的脚本在少于3列时也更改类，而不是通过CSS进行更改？我添加了一个演示链接：这个答案有用吗？请务必接受我的回答。

<ul class="list">
    <li class="list-item">Text</li>
    <li class="list-item">Text</li>
 </ul>

.list { 
    -moz-column-count: 3;
    -moz-column-gap: 1px; }`

.list-item {
    position: relative;
    padding: 0.46667rem 1.2rem;
    overflow: hidden;
    border-bottom: 1px solid #FFF;
    background-color: #EEE;
}

.container{
  width:500px;
  margin-left:auto;
  margin-right:auto;
}