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

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

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

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