CSS中實現塊元素的上下居中，是很常見的需求。下面介紹兩種實現方式。

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

第一種方法是使用絕對定位和transform屬性。首先，將元素的頂部定位到父元素的中心點，使用top: 50%實現。接下來，將元素的左邊緣也定位到父元素的中心點，使用left: 50%實現。最后，使用transform屬性水平和豎直方向上移動元素。translate(-50%,-50%)水平方向上將元素拉回一半長度（即絕對定位時寬度的一半），豎直方向同理。

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

第二種方法是使用flex布局。將父元素設置為flex容器，使其子元素按照一定比例分配空間。justify-content屬性在主軸方向上水平居中，align-items屬性在交叉軸方向上垂直居中。