CSS垂直居中一直是網頁布局中一個比較棘手的問題，而使用flex布局可以讓這個問題變得簡單和有效。

使用flex布局，我們可以使用align-items屬性輕松實現垂直居中。align-items屬性可以定義flex容器內項目在交叉軸上的對齊方式。默認是stretch，但我們可以設置為center。

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

上面的代碼中，我們使用display: flex讓父元素成為一個flex容器。然后我們設置align-items: center，讓子元素在交叉軸上居中對齊。

需要注意的是，這種方法只對單行的子元素有效。如果你的子元素是多行或者塊級元素，你可能需要使用display: flex和align-self屬性來實現垂直居中。

.flex-container {
display: flex;
}
.flex-item {
align-self: center;
}

使用以上代碼，我們可以將塊級元素垂直居中。.align-self屬性指定了每個項目的對齊方式。默認為auto，即使用父元素的align-items值；可以設置為center或其他值。

總之，在使用CSS布局時，使用flexbox可以讓垂直居中變得更加容易和靈活。