在網站設計中，我們常常會遇到需要將一張圖片放在頁面中央，但是如果圖片比頁面大，該如何處理呢？下面我們來介紹一種利用CSS實現圖片居中的方法。

首先，我們需要將圖片包裹在一個容器中。例如：

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

接下來，我們需要給這個容器添加一些CSS代碼：

.img-container {
position: relative;
width: 100%;
height: 100%;
display: flex; /*這一行是關鍵*/
justify-content: center;
align-items: center;
}

其中，position: relative;讓容器變為相對定位，width: 100%; height:100%;使容器占據整個頁面，display: flex;開啟彈性布局，justify-content: center; align-items: center;讓子元素在容器中水平垂直居中。

最后，我們需要給圖片也添加一些CSS樣式：

.img-container img {
max-height: 100%;
max-width: 100%;
}

這樣就可以讓圖片在容器中按比例縮放，同時保證圖片不會超出容器。

總結一下，使用CSS實現圖片居中有兩點要注意：

1. 要將圖片放在一個容器中，給容器添加相應的CSS樣式。
2. 要給圖片添加max-height和max-width，防止圖片超出容器。

希望本文的內容對您有所幫助。