本文目錄導(dǎo)讀：

1. 圖片居中顯示
2. 圖片放大效果實(shí)現(xiàn)

CSS實(shí)現(xiàn)圖片居中并放大效果的方法

圖片居中顯示

在CSS中，我們可以使用flexbox布局或者grid布局來(lái)實(shí)現(xiàn)圖片居中顯示的效果，這兩種布局方式都可以輕松地將元素居中放置，下面是一個(gè)使用flexbox布局的例子：

HTML結(jié)構(gòu)：

<div class="container">
  <img src="your-image-source.jpg" alt="Image Description" class="centered-image">
</div>

CSS樣式：

.container {
  display: flex; /* 使用flexbox布局 */
  justify-content: center; /* 水平居中 */
  align-items: center; /* 垂直居中 */
  height: 100vh; /* 設(shè)置容器高度為視窗高度，確保圖片全屏顯示 */
}

這樣，圖片就會(huì)在頁(yè)面中居中顯示，接下來(lái)我們討論如何讓圖片放大。

圖片放大效果實(shí)現(xiàn)

要實(shí)現(xiàn)圖片的放大效果，我們可以使用CSS的transition和transform屬性，通過(guò)改變鼠標(biāo)懸停時(shí)圖片的scale值，可以實(shí)現(xiàn)圖片的放大效果，下面是一個(gè)簡(jiǎn)單的例子：

.centered-image {
  transition: transform .2s ease-in-out; /* 動(dòng)畫(huà)過(guò)渡效果 */
}
.centered-image:hover {
  transform: scale(1.5); /* 鼠標(biāo)懸停時(shí)放大圖片***原來(lái)的1.5倍大小 */
}

這樣，當(dāng)鼠標(biāo)懸停在圖片上時(shí)，圖片就會(huì)從中心放大，由于我們之前已經(jīng)實(shí)現(xiàn)了圖片的居中顯示，所以無(wú)論圖片如何放大，都會(huì)保持在頁(yè)面的中心位置，這就是使用CSS實(shí)現(xiàn)圖片從中心放大的方法。