CSS是前端開發所必需的技能之一，而CSS3.0則是CSS中最新的版本。其中一個功能就是垂直居中。

在CSS3.0中，有三種方式可以使元素垂直居中，分別是使用table、使用flexbox和使用translate。下面分別介紹一下。

/* 使用table實現垂直居中 */
.container {
display: table;
}
.center {
display: table-cell;
vertical-align: middle;
}

上述代碼中，我們將父元素設置為table，子元素設置為table-cell，然后再通過vertical-align屬性設置子元素在垂直方向上居中。

/* 使用flexbox實現垂直居中 */
.container {
display: flex;
align-items: center;
justify-content: center;
}

使用flexbox讓元素垂直居中的方法相對來說比較簡單，只需要設置父元素為flex容器，再通過align-items和justify-content屬性即可讓子元素在水平和垂直方向上居中。

/* 使用translate實現垂直居中 */
.container {
position: relative;
}
.center {
position: absolute;
top: 50%;
transform: translateY(-50%);
}

使用translate的方式也是比較常見的一種方式。首先，我們設置父元素的position為relative，然后設置子元素的position為absolute，再通過top: 50%將元素向下移動一半的高度，最后使用translateY(-50%)將元素向上移動一半的高度即可實現垂直居中。

總結來說，CSS3.0提供了多種方式來讓元素垂直居中，選擇適合自己的方式可以讓我們更加高效地完成頁面布局。