CSS塊元素的垂直和水平居中是前端開(kāi)發(fā)中常見(jiàn)的問(wèn)題，本文主要介紹幾種實(shí)現(xiàn)CSS塊元素垂直水平居中的方法。

/*第一種方法:使用絕對(duì)定位*/
.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; /*水平垂直居中*/
}

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

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

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