在網頁設計中，圖片是不可或缺的元素之一。但是，有時候圖片的大小可能與我們所想的不一樣，可能比較大或比較小，這就需要通過CSS來進行適當地調整。其中，讓圖片居中是常見的需求之一。 下面，首先演示一下如何讓圖片水平居中： ```

``` 在上面的代碼中，我們給img元素設置了一個display:block的屬性，使其變成塊級元素，這樣才可以使用margin:auto屬性實現水平居中。我們設置了左右margin值相同，且為auto，這樣就可以自動居中了。 接著，我們演示如何讓圖片垂直居中： ```

``` 在上述代碼中，我們將p元素的display屬性設置為table-cell，這樣就可以利用垂直居中的特性來使圖片居中了。同時，我們給p元素設置了高度，以便能夠垂直居中。注意，img元素的高度是自動根據寬度等比例縮放的，所以我們不能直接設置高度為100%，而是要設置為max-height:100%，使其能夠自適應高度。 綜上所述，通過上述兩種方法，我們可以輕松地實現圖片的水平和垂直居中。