CSS盒子模型是網頁布局中非常重要的一部分，它包含了網頁中所有的元素并規定了它們的位置、大小等屬性。當我們需要將一個盒子垂直居中時，可以使用以下方法：

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

以上代碼使用了CSS3的flex布局，將盒子的父元素設置為彈性容器，并通過`justify-content: center;`和`align-items: center;`屬性分別水平和垂直居中了盒子。如果想要只垂直居中，可以將`justify-content`屬性設置為`flex-start`或`flex-end`。

.container {
position: relative;
}
.box {
position: absolute;
top: 50%;
transform: translateY(-50%);
}

以上代碼則是使用了絕對定位和`transform`屬性將盒子垂直居中。首先將盒子的父元素設置為相對定位，然后使用絕對定位將盒子定位在父元素的中心，最后利用`transform: translateY(-50%);`將盒子上移50%的高度，達到垂直居中的效果。

以上兩種方法都可以實現垂直居中，具體使用哪種取決于個人喜好和實際需要。在實踐中，我們可以根據不同情況選擇不同的方法來實現垂直居中。