在開發網頁時，必不可少的就是使用CSS來樣式化頁面。其中，對于圖片的處理也是非常重要的，其中一個常見的問題就是如何將圖片居中。下面，我們將演示一些方法。 首先，我們來看一下HTML代碼：

<div class="container">
<img src="example.jpg" class="center"/>
</div>

上面的代碼中，我們使用了一個包含圖片的`div`容器。圖片使用了`img`標簽，并且定義了一個名為`center`的class，作為居中的標志。 以下是CSS代碼：

.container {
display: flex;
justify-content: center;
align-items: center;
}
.center {
display: block;
margin: 0 auto;
}

在上面的代碼中，我們首先使用了`display: flex;`來定義容器為彈性盒子，然后通過`justify-content: center;`和`align-items: center;`屬性將圖片居中。 接下來，我們還使用了`.center`類來將圖像本身設置為塊元素，并使用`margin: 0 auto;`將其水平居中。 此外，我們還可以使用另一種方法來實現圖片居中：

.center {
position: absolute;
left: 50%;
top: 50%;
transform: translate(-50%, -50%);
}

在這個例子中，我們使用了`position: absolute;`屬性將圖像定位到父級元素。然后，使用`left: 50%;`和`top: 50%;`將其定位在父級元素的中心。最后，使用`transform: translate(-50%, -50%);`屬性偏移圖像的位置，使其在垂直和水平方向上都居中。 通過以上兩種方法，我們可以輕松地將圖片居中。可以根據實際情況選擇最適合自己的方法。