在Web開發中，我們經常會需要在網頁中插入圖片，但有時候我們想讓這些圖片變大并居中。接下來，我們就來學習一下如何使用CSS將圖片居中并放大。

/* 將圖片居中 */
img {
display: block;
margin: 0 auto;
}
/* 使圖片放大 */
img:hover {
transform: scale(1.5);
}

首先，我們需要使用CSS將圖片居中。這可以通過將圖片的display屬性設置為block，然后將margin屬性設置為“0 auto”來實現。這將把圖片居中，因為margin:auto將圖片水平居中，而margin: 0將圖片垂直居中。

接下來，我們來實現圖片的放大效果。這可以通過使用:hover偽類來觸發動畫。當鼠標懸停在圖片上時，我們可以使用transform屬性的scale()功能來使圖片變大。例如，我們將scale屬性的值設置為1.5，即將圖片放大50%。

最后，通過使用上述代碼，我們可以獲得一個可居中并可放大的圖片。當鼠標懸停在圖片上時，該圖片將變大，并且在進行響應式設計時，也可以保持圖片的居中和放大效果。