CSS中有很多方法可以實現塊級元素的垂直居中，下面就介紹其中三種比較實用的方法。

.method-1 {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}

這種方法使用了絕對定位和transform屬性。將元素的上下居中點移動到50%處，左右居中點也移動到50%處。然后再通過translate屬性向左和向上移動元素的1/2寬度和1/2高度，就可以實現元素的垂直居中了。

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

這種方法使用了Flexbox布局，直接通過設置display為flex，再通過justify-content和align-items屬性來分別設置水平和垂直方向的居中方式。這種方法比較簡單，但需要注意兼容性問題。

.method-3 {
position: relative;
}
.method-3:before {
content: "";
display: inline-block;
height: 100%;
vertical-align: middle;
}
.method-3 .child {
display: inline-block;
vertical-align: middle;
}

這種方法也是使用了絕對定位和偽元素:before的方法。首先需要給元素設置position:relative屬性，然后再創建一個高度為100%，并且內容為空的偽元素，通過設置其display為inline-block，利用vertical-align屬性來和子元素垂直居中。最后將子元素的display設置為inline-block，并且也使用vertical-align屬性來與偽元素垂直居中。