CSS是前端開發(fā)中非常重要的一部分，它可以使得網(wǎng)站的樣式更加美觀和易于閱讀。其中，讓形狀居中也是CSS中非常常見的問題。下面將介紹如何解決這個(gè)問題。

//HTML代碼
<div class="outer">
<div class="inner"></div>
</div>
//CSS代碼
.outer{
position: relative; //設(shè)置父元素為相對定位
width: 200px;
height: 200px;
background-color: #ccc;
}
.inner{
position: absolute; //設(shè)置子元素為絕對定位
width: 100px;
height: 100px;
background-color: #f00;
top: 50%; //垂直居中，設(shè)置頂部距離為50%
left: 50%; //水平居中，設(shè)置左側(cè)距離為50%
transform: translate(-50%, -50%); //利用transform將子元素的中心點(diǎn)與父元素的中心點(diǎn)對齊
}

從代碼中可以看出，我們首先需要將父元素設(shè)置為相對定位，然后將子元素設(shè)置為絕對定位，并設(shè)置子元素的寬度和高度。接著，通過設(shè)置子元素的top和left屬性，使子元素垂直和水平居中。但此時(shí)子元素的中心點(diǎn)并沒有與父元素的中心點(diǎn)對齊，這時(shí)候就需要使用transform屬性了。通過transform的translate函數(shù)，將子元素的中心點(diǎn)與父元素的中心點(diǎn)對齊，這樣就實(shí)現(xiàn)了形狀的居中。

總之，CSS中讓形狀居中可以通過設(shè)置父元素為相對定位、子元素為絕對定位、并利用transform函數(shù)來實(shí)現(xiàn)。這是一個(gè)非常實(shí)用的技巧，在實(shí)際開發(fā)中可以大大簡化頁面布局。