在網頁布局中，經常需要將盒子居中，使得頁面看起來更加美觀。在CSS中，我們可以使用不同的方法實現盒子居中，其中一種方法是容器內盒子居中。 首先，我們需要了解什么是容器和盒子。容器是一個父元素，盒子是該容器內的子元素。那么如何讓盒子居中呢？我們可以使用兩個屬性進行設置：display和text-align。 首先，將容器的display屬性設置為flex，這樣就可以使盒子在容器中水平和垂直居中。下面是代碼演示：

.container {
display: flex;
justify-content: center; /* 水平居中 */
align-items: center; /* 垂直居中 */
}

使用以上代碼，我們可以讓容器內的盒子水平和垂直居中。然而，如果我們只想讓盒子水平居中，可以將容器的text-align屬性設置為center，如下所示：

.container {
text-align: center; /* 水平居中 */
}
.container >.box {
display: inline-block; /* 將盒子設置為inline-block */
}

在以上代碼中，我們將盒子設置為inline-block，這是因為如果我們不設置，盒子將占據整個容器的寬度。而設置為inline-block后，盒子則只占據其內部需要的空間，容器的text-align屬性才能生效。 綜上所述，通過設置容器的display和text-align屬性，我們可以輕松地實現盒子的居中。使用以上方法，可以使頁面更加美觀，提高用戶的使用體驗。