CSS中有一個強大的布局屬性叫做flex，它能夠靈活地布局我們的網頁，其中垂直居中是一個比較常見的需求，下面我們來看看如何使用flex來實現垂直居中。

.container {
display: flex; /* 容器設置為flex布局 */
justify-content: center; /* 水平居中 */
align-items: center; /* 垂直居中 */
}

上述代碼中，我們首先將容器設置為flex布局，然后使用justify-content屬性將內部元素水平居中，最后使用align-items屬性將內部元素垂直居中。

不過需要注意的是，這種方法只適用于一個元素的垂直居中，如果我們要將多個元素同時垂直居中，可以使用Flexbox的另一個強大屬性——align-content。

.container {
display: flex; /* 容器設置為flex布局 */
flex-direction: column; /* 縱向排列子元素 */
justify-content: center; /* 水平居中 */
align-content: center; /* 垂直居中 */
height: 100vh; /* 限制容器高度 */
}

上述代碼中，我們將容器的flex-direction屬性設置為column，使內部元素縱向排列，然后使用align-content將內部元素垂直居中。

需要注意的是，上述代碼中我們還限制了容器的高度為100vh，這是由于內容過少時，容器的高度可能不夠撐滿整個屏幕，因此需要限制容器的高度。

以上就是使用flex實現垂直居中的方法，希望對大家有所幫助。