CSS塊元素的垂直和水平居中是前端開發中常見的問題，本文主要介紹幾種實現CSS塊元素垂直水平居中的方法。

/*第一種方法:使用絕對定位*/
.parent {
position: relative;
}
.child {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
/*第二種方法:使用flex布局*/
.parent {
display: flex;
justify-content: center; /*水平居中*/
align-items: center; /*垂直居中*/
}
/*第三種方法:使用Grid布局*/
.parent {
display: grid;
place-items: center; /*水平垂直居中*/
}

第一種方法是使用絕對定位，需要將容器的position屬性設為relative，讓子元素的position屬性設為absolute，并通過top:50%和left:50%將子元素的左上角放在容器中心，再通過transform:translate(-50%,-50%)將子元素自身的寬高都向左上移動50%，即達到垂直水平居中的效果。

第二種方法是使用Flex布局，在容器上設置display:flex即可，再設置justify-content:center和align-items:center即可實現左右居中與垂直居中。

第三種方法是使用Grid布局，在容器上設置display:grid，再設置place-items:center即可實現水平和垂直居中。