<div class="image-container"><img src="image1.jpg"><img src="image2.jpg"><img src="image3.jpg"><img src="image4.jpg"></div>

`標簽中，并為其添加一個class屬性。這樣我們就可以通過CSS選擇器來對它們進行樣式的調(diào)整。

接下來，我們將使用CSS的flexbox布局來將這些圖片分為兩行，并讓它們居中對齊。

.image-container {
display: flex;
flex-wrap: wrap;
justify-content: center;
}
.image-container img {
width: 50%;
}

我們首先將父容器的display屬性設(shè)置為flex，這樣容器內(nèi)的元素就可以自動排列。接著，我們設(shè)置flex-wrap屬性為wrap，這樣就可以讓圖片自動換行，而不是全部擠在一行里。最后，我們通過justify-content屬性來實現(xiàn)居中對齊。

另外，為了讓這些圖片尺寸相等，我們設(shè)置每個圖片的寬度為50%。這樣即使圖片大小不一，它們也可以等比例縮放到相同的尺寸。

現(xiàn)在，我們已經(jīng)成功地將這4張圖片分為兩行，并居中對齊了。

下面是完整的CSS代碼：

.image-container {
display: flex;
flex-wrap: wrap;
justify-content: center;
}
.image-container img {
width: 50%;
}

通過上述代碼，我們已經(jīng)成功實現(xiàn)了4張圖片上下各兩張的布局。