CSS 是前端開發中一項非常重要的技術，它可以控制網頁元素的樣式和布局。其中，一項常見的需求就是讓圖片居于正中的位置。下面我們來看看如何使用 CSS 實現這個效果。

/* 首先，需要將圖片的外邊距和內邊距全部設為0，
然后將其寬度和高度都設置為100% */
img {
margin: 0;
padding: 0;
width: 100%;
height: 100%;
}
/* 接著，需要將圖片的父元素設置為相對定位 */
.parent {
position: relative;
}
/* 最后，將圖片自身設置為絕對定位，并將左邊距和上邊距都設為50%，
然后再將其寬度和高度都分別設置為圖片自身寬度和高度的一半 */
img {
position: absolute;
left: 50%;
top: 50%;
transform: translate(-50%, -50%);
}

在上面的樣式中，我們使用了 transform 屬性來將圖片自身向左和向上移動自身寬度和高度的一半。這樣就可以將圖片完美居于父元素的正中央了。

知道了以上的 CSS 知識，相信大家的頁面布局能力也會更加得心應手了。希望大家可以通過不斷地學習和實踐，不斷提高自己的前端開發技能。