CSS居父div中是前端開發中非常重要的一項技能。一個好的CSS布局可以使網站看起來更加美觀、整潔，具有良好的用戶體驗。

在CSS中，我們可以利用“position”屬性來實現不同的布局方式。而“position”屬性有三種不同的值：static（默認值）、absolute和relative。其中，relative可以用于實現居父div中的布局。

父div {
position: relative;
}
子div {
position: absolute;
top: 50%;
transform: translateY(-50%);
}

首先，我們在父div中設定“position: relative”，這是必須的。因為如果不加這一項，子div會以整個頁面作為其參照物。

接著，在子div中我們設定“position: absolute”，這樣子div就可以脫離文本流，不占用太多的空間。

然后，我們可以在子div中利用“top”來將其移到父div的中間。同時，我們也可以使用“transform: translateY(-50%)”來使其完美居中。

需要注意的是，居父div中的這個布局方式只適用于子div的寬度小于父div的情況。如果子div的寬度大于父div，需要進行額外的處理。

在實際開發中，我們經常會遇到需要將文本或圖片居中的情況。這時，我們可以利用上述方法實現較為簡便的居中布局效果。