我使用一个不可见的伪元素（::after）占据容器中的最后一个槽。但如果只有一个元素，我想将其放置在中心。
因此，为了做到这一点，我需要“删除”这种情况下的伪元素。
如果可以的话我该怎么做？
.main {
background: #999;
margin: 0 auto;
width: 500px;
display: flex;
flex-wrap: wrap;
justify-content: space-between;
}
.box {
background: #7ab9d7;
color: #555;
height: 30px;
width: 30%;
margin-bottom: 30px;
text-align: center;
font-size: 30px;
padding-top: 120px;
}
.main::after {
height: 0;
width: 30%;
content: "";
}<div class="main">
<div class="box">1</div>
</div>P.S.示例取自here但孩子的数量减少到1个。
附：附：如果有很多 div - 看起来像这样
如果一个 div - 看起来像这样
如果父级中有一个子级，如何不显示 ::after 内容？
没有 CSS 方法（今天，但有一天可能会使用父选择器）根据 Flex 项目的数量删除伪，即使它是子项并充当 Flex 项目，它仍然不能是显式的除了通过其父级之外，还有其他任何目标。
一个简单的解决方法是将左边距与transform当只有 1 个元素时，这里使用only-child选择器。
一个可以使用position: relative; left: 50%以及，虽然margin-left少一行
这适用于任意数量的元素，无论其大小。
堆栈片段
.main {
background: #999;
margin: 0 auto;
width: 500px;
display: flex;
flex-wrap: wrap;
justify-content: space-between;
}
.box {
background: #7ab9d7;
color: #555;
height: 30px;
width: 30%;
margin-bottom: 30px;
text-align: center;
font-size: 30px;
padding-top: 120px;
}
.main::after {
height: 0;
width: 30%;
content: "";
}
.main div:only-child { /* added rule */
margin-left: 50%;
transform: translateX(-50%);
}<div class="main">
<div class="box">1</div>
</div>
<br>
<div class="main">
<div class="box">1</div>
<div class="box">1</div>
</div>
<br>
<div class="main">
<div class="box">1</div>
<div class="box">1</div>
<div class="box">1</div>
<div class="box">1</div>
</div>
<br>根据评论更新，其中，如果有 2 个项目，它们也应该居中。
为了能够使用现有的标记/CSS 来实现这一点，我们还需要利用::before pseudo.
加上几个聪明的CSS选择器，我们可以数一下如果有 1 或 2 个元素。
这样的工作原理是，当 1 或 2 个项目时，使用自动边距，并且使用order属性的项目位于::after，现在是 100% 宽，并将把项目推到新行，在那里它们不会受到任何伪的影响。
对于 3 个或更多项目，它们将位于两个伪项目之前，其中::before现在将充当::after在最初的解决方案中做了，并将最后一行的项目左对齐。
小提琴演示
堆栈片段
.main {
background: #999;
margin: 0 auto;
width: 500px;
display: flex;
flex-wrap: wrap;
justify-content: space-between;
}
.box {
background: #7ab9d7;
color: #555;
height: 30px;
width: 30%;
margin-bottom: 30px;
text-align: center;
font-size: 30px;
padding-top: 120px;
}
.main::before {
height: 0;
width: 30%;
content: "";
order: 1;
}
.main::after {
height: 0;
width: 100%;
content: "";
order: 2;
}
/* new rules */
.main div:only-child, /* if 1 only */
.main div:first-child:nth-last-child(2) + div { /* if 2, the 2nd*/
order: 3;
margin-left: auto;
margin-right: auto;
}
.main div:first-child:nth-last-child(2) { /* if 2, the 1st */
order: 3;
margin-left: auto;
}<div class="main">
<div class="box">1</div>
</div>
<br>
<div class="main">
<div class="box">1</div>
<div class="box">2</div>
</div>
<br>
<div class="main">
<div class="box">1</div>
<div class="box">2</div>
<div class="box">3</div>
<div class="box">4</div>
</div>
<br>
<div class="main">
<div class="box">1</div>
<div class="box">2</div>
<div class="box">3</div>
<div class="box">4</div>
<div class="box">5</div>
</div>