CSS小程序垂直居中是一個很常見但是又讓人很頭疼的問題。在開發中，我們經常需要將某個元素垂直居中，但是不同的元素有不同的實現方式。接下來，我們來看看如何用CSS實現垂直居中。

//方法一：使用display: table-cell和vertical-align: middle實現
.container {
display: table-cell;
vertical-align: middle;
}
//方法二：使用flexbox實現
.container {
display: flex;
align-items: center;
}
//方法三：使用position和transform實現
.container {
position: relative;
}
.item {
position: absolute;
top: 50%;
transform: translateY(-50%);
}

以上三種方法都可以實現垂直居中，但是flexbox和transform的方法更加適用于現代瀏覽器。當然，在實現垂直居中時，我們還需要考慮到兼容性、布局結構等因素。

正確使用CSS實現垂直居中可以提高頁面的美觀程度和用戶體驗。希望這篇文章能夠給大家帶來幫助。