在網頁設計中，經常需要將圖片置于頁面中央。這時候，我們可以通過使用CSS來實現圖片居中的效果。 要讓圖片居中，我們需要將圖片包裹在一個容器中，然后利用CSS設置該容器的寬度、高度和位置等屬性。下面是一個示例代碼：

<style>
.center {
width: 300px;
height: 300px;
margin: 0 auto;
text-align: center;
}
.center img {
display: block;
margin: 0 auto;
}
</style>
<div class="center">
<img src="example.jpg" alt="example" />
</div>

在上面的代碼中，我們創建了一個名為.center的類。該類用來包含圖片，并實現圖片居中的效果。具體來說，我們設置了.center的寬度和高度均為300px，即.container是一個300x300的正方形。我們使用了“margin: 0 auto”來實現水平居中的效果。此外，我們還通過“text-align: center”來設置圖片在.container中水平居中。 接下來，我們使用.center img規則來設置圖片的樣式。我們將img元素的display屬性設置為block，這樣圖片就能夠占據整個容器，并水平居中。我們使用了“margin: 0 auto”來實現圖片在容器中的水平居中效果。 使用上面的示例代碼，你就可以將任何一張圖片置于頁面中央啦！