如何在HTML中使用CSS使圖片在div中居中顯示

在網(wǎng)頁(yè)設(shè)計(jì)中，將圖片居中顯示在div容器中是一個(gè)常見的需求，通過(guò)合理使用CSS樣式，可以輕松實(shí)現(xiàn)這一目標(biāo)，下面將詳細(xì)介紹如何通過(guò)CSS實(shí)現(xiàn)圖片在div中的居中顯示。

一、文本與圖片垂直居中

當(dāng)需要在div中實(shí)現(xiàn)文本與圖片的垂直居中對(duì)齊時(shí)，可以利用CSS的vertical-align屬性以及display屬性，假設(shè)我們有一個(gè)包含圖片的div元素，可以這樣操作：

<div class="image-container">
  <img src="image.jpg" alt="示例圖片">
</div>

對(duì)應(yīng)的CSS樣式為：

.image-container {
  display: flex; /* 使用彈性盒子布局 */
  justify-content: center; /* 水平居中對(duì)齊 */
  align-items: center; /* 垂直居中對(duì)齊 */
  height: 300px; /* 設(shè)置容器高度，確保圖片垂直居中 */
}

這種方法適用于固定高度的div容器，如果容器高度不固定，可能需要其他方法來(lái)實(shí)現(xiàn)居中效果。

二、圖片水平居中

要使圖片在div中水平居中顯示，可以使用CSS的margin屬性來(lái)實(shí)現(xiàn)，假設(shè)我們有一個(gè)寬度自適應(yīng)的div容器，可以這樣操作：

<div class="image-container">
  <img class="centered-image" src="image.jpg" alt="示例圖片">
</div>

對(duì)應(yīng)的CSS樣式為：

.image-container {
  text-align: center; /* 設(shè)置文本對(duì)齊方式為居中 */
}
.centered-image {
  margin: auto; /* 圖片水平方向的外邊距自動(dòng)調(diào)整 */
}

這種方法適用于寬度自適應(yīng)的div容器中的圖片水平居中顯示，當(dāng)容器寬度變化時(shí)，圖片始終保持在水平方向上居中顯示，這種方法不需要考慮容器的高度，因此更加靈活，通過(guò)結(jié)合使用這些方法，可以輕松地實(shí)現(xiàn)圖片在div中的居中顯示。