/* 水平居中 */
.parent {
display: flex;
justify-content: center;
}
/* 垂直居中 */
.parent {
display: flex;
align-items: center;
}
/* 水平垂直居中 */
.parent {
display: flex;
justify-content: center;
align-items: center;
}

元素。通過(guò)設(shè)置父元素的display屬性值為flex，可以將其變?yōu)橐粋€(gè)彈性容器，然后通過(guò)設(shè)置justify-content屬性值為center將其水平居中，而通過(guò)設(shè)置align-items屬性值為center可以將其垂直居中。同時(shí)，也可以同時(shí)設(shè)置這兩個(gè)屬性來(lái)實(shí)現(xiàn)水平垂直居中。

除了使用flex布局，還可以使用position和margin兩個(gè)屬性來(lái)實(shí)現(xiàn)居中。

/* 絕對(duì)定位和負(fù)值偏移實(shí)現(xiàn)水平居中 */
.parent {
position: relative;
}
.child {
position: absolute;
left: 50%;
transform: translateX(-50%);
}
/* 負(fù)值margin實(shí)現(xiàn)水平垂直居中 */
.parent {
position: relative;
}
.child {
position: absolute;
top: 50%;
left: 50%;
margin-right: -50%;
transform: translate(-50%, -50%);
}

以上代碼使用了position屬性來(lái)實(shí)現(xiàn)居中。通過(guò)設(shè)置父元素的position屬性值為relative將其變?yōu)橐粋€(gè)相對(duì)定位的容器，然后通過(guò)子元素的position屬性值為absolute將其絕對(duì)定位在父元素中。通過(guò)設(shè)置left和top屬性值為50%，可以將其水平和垂直居中，然后通過(guò)transform屬性值為translate來(lái)實(shí)現(xiàn)負(fù)值偏移或負(fù)值margin以達(dá)到水平垂直居中的效果。

總之，以上方法無(wú)論是使用flex布局還是position和margin屬性都可以實(shí)現(xiàn)