在CSS中，我們經常需要讓三個盒子在同一行顯示，這個可以通過一些技巧來實現。下面我們來看看具體的實現方法。

.box{
width: 30%;
height: 100px;
display: inline-block;
}

上面的代碼給三個盒子添加了一個類名為box，并設置了每個盒子的寬度為30%，高度為100px，以及將它們的展示方式設置為inline-block。

接下來，我們可以使用以下兩種方式來水平居中這些盒子：

.container{
text-align: center;
}
.container::after{
content: "";
display: inline-block;
width: 100%;
height: 0;
vertical-align: top;
}

上面的代碼給盒子的父元素添加了一個類名為container，并設置了text-align為center，使得盒子可以水平居中。同時使用了一個偽元素來占據多余的空白，以防止盒子不在同一行上展示。

.container{
display: flex;
justify-content: center;
}

上面的代碼也是給盒子的父元素添加了一個類名為container，但這次展示方式由inline-block變成了flex，并設置了justify-content為center，使得盒子可以水平居中。

這些方法都可以讓我們輕松實現三個盒子在同一行水平居中的效果。