<div>中有圖片如何讓<div>居中
在前端開發中，經常會遇到需要在<div>元素中插入圖片并讓<div>元素居中顯示的情況。本文將介紹幾個代碼案例，詳細講解如何實現這一需求。
，我們來看一個基本的案例。假設我們有一個<div>元素，并且希望在其中插入一張圖片，并讓這個<div>元素水平和垂直居中顯示。下面是相應的HTML和CSS代碼示例：

HTML代碼：

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

CSS代碼：

.container {
display: flex;
justify-content: center; /* 在水平方向上居中顯示 */
align-items: center; /* 在垂直方向上居中顯示 */
width: 100%;
height: 100vh; /* 使<div>元素充滿整個視口高度 */
}

在上面的代碼中，我們使用了flex布局來實現<div>元素的居中顯示。通過設置容器元素（<div>的父元素）的display屬性為flex，并分別將justify-content和align-items屬性設置為center，我們可以使<div>元素水平和垂直居中顯示。
接下來，我們來討論另一個常見的情況，即當<div>元素的尺寸不確定時，如何使其中的圖片居中顯示。下面是相應的HTML和CSS代碼示例：

HTML代碼：

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

CSS代碼：

.container {
display: flex;
justify-content: center;
align-items: center;
overflow: hidden; /* 隱藏<div>元素超出部分的內容 */
}
<br>
.container img {
max-width: 100%; /* 設置圖片的最大寬度為100% */
max-height: 100%; /* 設置圖片的最大高度為100% */
object-fit: contain; /* 縮放圖片以適應容器 */
}

在上面的代碼中，我們仍然使用flex布局來實現<div>元素的居中顯示。此外，我們還將容器元素的overflow屬性設置為hidden，以隱藏<div>元素中超出部分的內容。
在<div>元素中的<img>元素上，我們將max-width和max-height屬性分別設置為100%，以確保圖片的最大寬度和最大高度分別等于容器的寬度和高度。同時，我們使用object-fit屬性將圖片縮放以適應容器。
綜上所述，通過使用flex布局以及控制圖片的尺寸和縮放方式，我們可以輕松實現<div>中有圖片時的居中顯示效果。無論是<div>元素的尺寸固定還是不確定，以上的代碼案例都能解決相應的問題。希望本文對你理解如何實現這一需求有所幫助。