Html 弹性项目未居中

我有下面的布局，它用许多代表团队成员的圆圈填充一个包含div的分区。对于由

=3名
团队成员组成的团队，当达到预期结果时，我有一个奇怪的警告，但是对于仅由
1 | | 2名
成员组成的团队，圆圈与容器的最左侧对齐

为什么会这样


.fireteam{
填充：0 5px；
}
.消防队>p{
最大宽度：100%；
溢出：隐藏；
空白：nowrap；
保证金：0.1雷姆；
}
.消防队员#消防队员{
显示器：flex；
弯曲方向：立柱；
柔性包装：包装；
对齐内容：居中对齐；
证明内容：中心；
高度：4.2rem；
列表样式：无；
填充：0；
边框：1px实心#000；
边界半径：5px；
溢出：隐藏；
}
.消防队员.消防队员{
宽度：1.5雷姆；
高度：1.5雷姆；
背景：#000；
颜色：白色；
边界半径：50%；
保证金：0.25雷姆；
}

名字

十名成员



名字

十名成员




名字

十名成员





名字

十名成员






名字

十名成员












名字

十名成员
































您的flex容器缺少
对齐项目：居中

将此添加到您的代码中：

.fireteam #fireteamMembers {
  align-items: center; /* NEW */
  display: flex;
  flex-direction: column;
  flex-wrap: wrap;
  align-content: center;
  justify-content: center;
  height: 4.2rem;
  list-style: none;
  padding: 0;
  border: 1px solid #000;
  border-radius: 5px;
  overflow: hidden;
}


.fireteam{
填充：0 5px；
}
.消防队>p{
最大宽度：100%；
溢出：隐藏；
空白：nowrap；
保证金：0.1雷姆；
}
.消防队员#消防队员{
对齐项目：居中；/*新建*/
显示器：flex；
弯曲方向：立柱；
柔性包装：包装；
对齐内容：居中对齐；
证明内容：中心；
高度：4.2rem；
列表样式：无；
填充：0；
边框：1px实心#000；
边界半径：5px；
溢出：隐藏；
}
.消防队员.消防队员{
宽度：1.5雷姆；
高度：1.5雷姆；
背景：#000；
颜色：白色；
边界半径：50%；
保证金：0.25雷姆；
}

名字

十名成员



名字

十名成员




名字

十名成员





名字

十名成员






名字

十名成员












名字

十名成员