Html 在引导中水平对齐圆

我还没有那么好的引导，也不知道如何在标题下正确地定位这些圆圈。任何帮助都会很好我试过很多东西。我想我错过了一些我本该看到的愚蠢的事情

HTML

---

只需移除

填充顶部：100px选择器中的属性


#dif1{
宽度：100px；
高度：100px；
边界半径：50%；
显示：内联块；
颜色：白色；
背景：rgb（41168224）；
}
#dif2{
宽度：100px；
高度：100px；
边界半径：50%；
显示：内联块；
颜色：白色；
背景：rgb（221126 81）；
}
#dif3{
宽度：100px；
高度：100px；
边界半径：50%；
显示：内联块；
颜色：白色；
背景：rgb（175、79、122）；
}
#dif4{
宽度：100px；
高度：100px；
边界半径：50%；
显示：内联块；
颜色：白色；
背景：rgb（13816690）；
}

你能发布HTML和一张图来解释预期结果吗？谢谢，我不知道为什么我没有想到这一点，就像forreal一样。像那样简单的事情我都忘了
<div class="container">
    <div class="row">
        <div class="col-xs-2 col-md-2 col-lg-2">
            <div id="dif1"></div>
        </div>

        <div class="col-xs-2 col-md-2 col-lg-2">
            <div id="dif2"></div>
        </div>

        <div class="col-xs-2 col-md-2 col-lg-2">
            <div id="dif3"></div>
        </div>

        <div class="col-xs-2 col-md-2 col-lg-2">
            <div id="dif4"></div>
        </div>
    </div>
</div>

#dif1 {
    width: 100px;
    height: 100px;
    border-radius: 50%;
    display: inline-block;
    color: white;
    background: rgb(41, 168, 224);
   padding-top: 100px;
}

#dif2 {
    width: 100px;
    height: 100px;
    border-radius: 50%;
    display: inline-block;
    color: white;
    background: rgb(221, 126, 81);
}

#dif3 {
    width: 100px;
    height: 100px;
    border-radius: 50%;
    display: inline-block;
    color: white;
    background: rgb(175, 79, 122);
}

#dif4 {
    width: 100px;
    height: 100px;
    border-radius: 50%;
    display: inline-block;
    color: white;
    background: rgb(138, 166, 90);
}