設(shè)置圖片水平垂直居中在CSS中，可以通過(guò)使用flexbox布局來(lái)實(shí)現(xiàn)，以下是一個(gè)簡(jiǎn)單的示例代碼：

.container {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100vh; /* 根據(jù)需要調(diào)整容器高度 */
}
img {
  max-width: 100%; /* 確保圖片寬度不超過(guò)容器寬度 */
  height: auto; /* 自動(dòng)調(diào)整圖片高度以保持縱橫比 */
}

在這個(gè)示例中，我們創(chuàng)建了一個(gè)名為.container的類，用于包含圖片，這個(gè)類被設(shè)置為display: flex;，使其成為一個(gè)彈性盒子。justify-content: center;和align-items: center;屬性將圖片在水平和垂直方向上居中。height: 100vh;設(shè)置容器高度為100%，確保圖片在整個(gè)頁(yè)面上居中。

我們?yōu)閳D片元素設(shè)置了max-width: 100%;，確保圖片寬度不超過(guò)容器寬度。height: auto;屬性用于自動(dòng)調(diào)整圖片高度以保持縱橫比，避免圖片變形。

通過(guò)以上CSS代碼，我們可以輕松地實(shí)現(xiàn)圖片在水平垂直方向上的居中顯示，這種方法適用于各種場(chǎng)景，如網(wǎng)頁(yè)上的輪播圖、產(chǎn)品展示圖等。