在進行CSS布局的時候，經常會遇到多個框需要居中顯示的情況。下面介紹幾種實現多個框居中的方法。

使用flex布局

使用flex布局可以很方便地實現多個框的垂直居中和水平居中。

.container{
display: flex;
justify-content: center;
align-items: center;
height: 100vh;
}
.box{
width: 200px;
height: 100px;
background-color: red;
margin: 20px;
}

如上所示，首先設置容器的display為flex，然后使用justify-content和align-items分別控制容器的水平和垂直居中。在box的樣式中設置margin可以讓多個盒子之間有一定的間距。

使用margin:auto

如果只需要實現多個框的水平居中，可以使用margin:auto的方法。

.container{
text-align: center;
height: 100vh;
}
.box{
width: 200px;
height: 100px;
background-color: red;
display: inline-block;
margin: 20px auto;
}

如上所示，設置容器的text-align為center，然后將box設為inline-block，再使用margin:auto即可完成多個盒子的水平居中。注意，這種方法只實現了水平居中，沒有垂直居中。

使用grid布局

使用grid布局也可以實現多個框的居中。

.container{
display: grid;
justify-content: center;
align-items: center;
height: 100vh;
grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
grid-gap: 20px;
}
.box{
width: 200px;
height: 100px;
background-color: red;
}

如上所示，首先設置容器的display為grid，然后使用justify-content和align-items分別控制容器的水平和垂直居中。在grid-template-columns中設置repeat(auto-fit, minmax(200px, 1fr))可以實現自動調整列數的效果，grid-gap可以控制柵格之間的間距。

以上就是幾種實現多個框居中的方法，根據實際需求選擇適合自己的方法進行布局。