CSS的垂直居中一直是前端開發(fā)人員經(jīng)常遇到的問題。當(dāng)存在多個盒子需要垂直居中時，這一問題就變得更加棘手。在本文中，我們將會討論如何使用CSS將多個盒子垂直居中。

.container {
display: flex;
flex-wrap: wrap;
align-items: center;
justify-content: center;
height: 100vh;
}
.box {
background-color: #f9f9f9;
border: 1px solid #ccc;
width: 200px;
height: 100px;
margin: 10px;
}

以上代碼是一種最簡單的方法來實現(xiàn)多個盒子的垂直居中。在這個例子中，我們使用了Flexbox布局，并使用了align-items和justify-content屬性將盒子垂直和水平居中。.container元素用于包含所有需要垂直居中的盒子。

.container {
position: relative;
height: 100vh;
}
.box {
position absolute;
top: 50%;
transform: translate(-50%, -50%);
background-color: #f9f9f9;
border: 1px solid #ccc;
width: 200px;
height: 100px;
margin: 10px;
}

除了Flexbox布局，我們還可以使用position屬性和transform屬性來實現(xiàn)多個盒子的垂直居中。在這個例子中，.container元素被占滿了整個屏幕的高度，而.box元素則被放置在容器的中心。我們使用了top: 50%將盒子移動到容器的中間。接下來，使用translate屬性將盒子向上移動50%的高度，使其完全垂直居中。

無論使用Flexbox布局還是position屬性和transform屬性，我們可以使用這些簡單的技巧將多個盒子垂直居中。