CSS中垂直居中一直是前端開發者們熱議的話題。常見的垂直居中方式有很多，但是最常用的應該就是Flex布局和CSS3的transform屬性了。

.center{
display: flex;
align-items: center;
justify-content: center;
}

使用Flex布局的方法非常簡單，只需要在容器內加入以上CSS代碼即可。其中，display屬性設置為flex，align-items屬性設置為center可以使子元素垂直居中，而justify-content屬性設置為center可以使子元素水平居中。

.parent{
position: relative;
}
.child{
position: absolute;
top: 50%;
transform: translateY(-50%);
}

另一種方法是使用CSS3的transform屬性。首先，容器的position屬性要設置為relative。接著，子元素的position屬性設置為absolute，top屬性設置為50%，此時子元素會居于容器的中間位置，但是并不是垂直居中。因此，需要使用transform屬性的translateY函數將子元素的位置向上移動50%即可完成垂直居中操作。

總的來說，以上兩種方法都比較簡單易懂，但是需要針對具體情況選擇適合的方法來實現垂直居中。