在網頁設計中，經常需要將一張圖片嵌入到div容器中。此時，我們需要控制圖片在div中間顯示，而不是默認位于左上角。對于這個問題，使用CSS解決是最為常見的方法。
div {
text-align: center;
}
img {
display: block;
margin: auto;
}上述代碼中，我們首先通過
元素的樣式控制了文本或內聯元素在其中的位置，使其居中顯示。接下來，為了將圖片成塊狀元素（block element），我們設置其display屬性為block。此時，我們可以通過margin:auto屬性來實現自動居中。這表示我們將為圖片的左右邊距分別設置相等的數值，使其水平居中。
除了以上的CSS屬性，我們還可以使用絕對定位（absolute positioning）來將圖片居中。這種方式適用于希望讓圖片覆蓋在div中心的情況。例如：
div {
position: relative;
}
img {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}上述代碼中，我們首先將
元素的定位屬性設置為relative。接下來，對于圖片，我們使用絕對定位（absolute positioning）將其移至
容器的中心。設置top值為50%，表示圖片的頂部位于容器頂部與底部之間的中心位置。同樣，left值也是50%。但是這會使圖片的左側位于容器左側與右側之間的中心位置。為了解決這個問題，我們使用transform屬性來平移圖片的位置，讓其居中對齊。