CSS是一種非常重要的網頁設計語言，通過CSS的設置，我們可以實現很多不同的布局方式。本文將介紹CSS如何設置垂直布局。

要想實現垂直布局，我們可以利用flex布局，也可以使用傳統的定位方法。

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

上面的代碼中，我們設置了一個flex容器，通過flex-direction屬性設置了其子元素的排列方式為列排列，并通過justify-content和align-items屬性實現了子元素的垂直居中。

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

上面的代碼中，我們利用了絕對定位的方式進行設置。首先，我們為容器設置了相對定位。然后，我們為容器內的內容設置絕對定位，并通過top和transform屬性，實現了內容的垂直居中。

以上就是CSS設置垂直布局的兩種方式。通過靈活地運用這些技巧，我們可以在網頁設計中實現更加豐富的布局效果。