Html 如何在同一条线上水平居中放置2个或多个div

如何使它们居中，在同一条线上，彼此之间的宽度相同，而不考虑分辨率

<div id="stats">
<div class="box">
    <i class="fas fa-cloud"></i>
    <p>Members</p>
</div>
<div class="box">
    <i class="fas fa-cloud"></i>
    <p>Awards</p>
</div>
<div class="box">
    <i class="fas fa-cloud"></i>
    <p>Countries</p>
</div>
</div>

成员

奖励

国家

---

您可以在

css

中使用

flexbox

：

#统计数据{
显示器：flex；
对正内容：空间均匀；
}

成员

奖励

国家

---

显示：flex是一个很好的选择。

您也可以添加css参考吗？

.stats {
   display:flex;
   justify-content:space-evenly
}