CSS基于父控件居中，是在網(wǎng)頁(yè)設(shè)計(jì)中非常常見(jiàn)和重要的技術(shù)之一。可以通過(guò)以下三種方式實(shí)現(xiàn)。

//方式一：使用absolute + margin實(shí)現(xiàn)
.parent {
position: relative;
}
.child {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);  
}

代碼解釋：將子元素的位置調(diào)整到父元素的正中心，利用"transform"屬性對(duì)位置進(jìn)行調(diào)整。

//方式二：使用flex + justify-content + align-items實(shí)現(xiàn)
.parent {
display: flex;
justify-content: center;
align-items: center;
}
.child { }

代碼解釋：這是利用flex布局的特性,通過(guò)父元素對(duì)子元素進(jìn)行排列調(diào)整。子元素可以根據(jù)父元素的寬高和位置自動(dòng)居中對(duì)齊。

//方式三：使用grid + justify-content + align-items實(shí)現(xiàn)
.parent {
display: grid;
justify-content: center;
align-items: center;
}
.child { }

代碼解釋：同樣是利用父元素的位置形成一個(gè)網(wǎng)格布局，子元素可以在其中基于列數(shù)和行數(shù)進(jìn)行居中對(duì)齊。