CSS彈性盒子是在網頁設計中十分實用的一種布局方式。隨著移動設備的普及，網頁的自適應布局成為趨勢，而彈性盒子正是為此而生的。在彈性盒子中，縱向居中是一種經常用到的布局，本文將介紹如何使用CSS實現縱向居中。

首先，我們需要使用display:flex將父元素轉換為彈性盒子。給父元素設置align-items:center，即可實現縱向居中。以下是示例代碼：

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

接著，我們可以在父元素中添加子元素進行測試。在子元素中添加一些內容，并為其設置寬度和高度。由于父元素設置了align-items:center，子元素會自動垂直居中。以下是示例代碼：

.parent {
display:flex;
align-items:center;
height:300px;
}
.child {
width:200px;
height:100px;
}

需要注意的是，上述代碼只能實現居中，而不能實現完全居中。如果想要實現完全居中，可以將父元素的justify-content:center也設置為居中。以下是示例代碼：

.parent {
display:flex;
align-items:center;
justify-content:center;
height:300px;
}
.child {
width:200px;
height:100px;
}

最后，我們需要考慮瀏覽器兼容性問題。彈性盒子的兼容性不錯，但仍有些瀏覽器不支持。例如IE6~IE9、Android 4.0及以下的瀏覽器都不支持彈性盒子。因此，在實際應用中，需要謹慎選擇使用彈性盒子。