CSS中有一個(gè)強(qiáng)大的布局屬性叫做flex，它能夠靈活地布局我們的網(wǎng)頁(yè)，其中垂直居中是一個(gè)比較常見(jiàn)的需求，下面我們來(lái)看看如何使用flex來(lái)實(shí)現(xiàn)垂直居中。

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

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

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

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

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

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

以上就是使用flex實(shí)現(xiàn)垂直居中的方法，希望對(duì)大家有所幫助。