CSS中的布局是網(wǎng)頁(yè)設(shè)計(jì)中不可或缺的一部分，而圖片的布局同樣也非常重要。在CSS中，圖片可以通過(guò)多種方式進(jìn)行布局。下面將介紹幾種常見的圖片布局方式。

img {
display: block;
margin: 20px auto;
}

一、居中對(duì)齊

使用上述代碼，可以讓圖片居中對(duì)齊。其中，display:block;將圖片轉(zhuǎn)換為塊級(jí)元素，margin:20px auto;可以將圖片水平居中對(duì)齊。

.container {
position: relative;
}
img {
position: absolute;
top: 0;
left: 0;
}

二、絕對(duì)定位

如果想讓圖片在其他元素的上方或下方，可以使用絕對(duì)定位。上述代碼中，.container為包含圖片的容器。img的position屬性設(shè)為absolute，top、left屬性為0，將圖片放置在容器的左上角。使用這種布局，必要時(shí)還要為容器設(shè)置高度。

.container {
display: flex;
justify-content: center;
align-items: center;
}
img {
width: 80%;
height: auto;
}

三、彈性盒子布局

使用彈性盒子布局，可以讓圖片在容器中水平垂直居中。上述代碼中，.container設(shè)置為彈性容器，justify-content:center;和align-items:center;將圖片水平垂直居中。img設(shè)置寬度為80%，高度自動(dòng)適應(yīng)。

總結(jié)來(lái)說(shuō)，圖片的布局方式很多，具體要根據(jù)實(shí)際情況選擇合適的方式。以上介紹的是比較常見的幾種布局方式，可以供大家參考。