在進行網(wǎng)頁布局時，經(jīng)常會遇到需要將兩個<div>元素并排顯示，并且居中對齊的情況。這種排列方式通常用于展示兩個相關(guān)的內(nèi)容，比如圖片和文字，或者兩個相互獨立但又有聯(lián)系的部分。

下面將使用幾個代碼案例來詳細解釋如何實現(xiàn)讓兩個<div>元素并排居中展示。

案例1：使用flexbox布局

.container {
display: flex;
justify-content: center;
}
<br>
.item {
margin: 0 10px;
}

上述代碼中，我們使用了CSS的flexbox布局來實現(xiàn)兩個<div>元素的并排居中。

，我們創(chuàng)建一個包裹這兩個<div>元素的父容器，即.container。

然后，我們給.container設(shè)置display為flex，這樣就將其變成了一個flex容器。

接著，我們使用justify-content: center;將兩個<div>元素在水平方向上居中對齊。

最后，我們給兩個<div>元素添加margin來設(shè)置它們之間的間距，這里我們設(shè)置為10px。

案例2：使用float屬性

.container::after {
content: "";
display: table;
clear: both;
}
<br>
.item {
float: left;
margin: 0 10px;
}
<br>
.container {
text-align: center;
}

在這個案例中，我們使用了CSS的float屬性來實現(xiàn)兩個<div>元素的并排居中。

，我們在.container的偽元素::after中添加clear: both;，這樣可以確保.container能夠正確地包裹.item元素。

然后，我們給.item設(shè)置float: left;，這樣兩個<div>元素會并排顯示。

接著，我們給.item添加margin來設(shè)置它們之間的間距，這里我們設(shè)置為10px。

最后，我們給.container設(shè)置text-align: center;來將其中的內(nèi)容居中對齊。

案例3：使用grid布局

.container {
display: grid;
grid-template-columns: 1fr 1fr;
justify-content: center;
grid-gap: 10px;
}

在這個案例中，我們使用了CSS的grid布局來實現(xiàn)兩個<div>元素的并排居中。

，我們創(chuàng)建一個包裹這兩個<div>元素的父容器，即.container。

然后，我們使用display: grid;將其變成一個grid容器。

接著，我們使用grid-template-columns: 1fr 1fr;將container分成了兩列，每列的寬度都為1fr。

然后，我們使用justify-content: center;將兩列的內(nèi)容在水平方向上居中對齊。

最后，我們使用grid-gap: 10px;來設(shè)置兩個<div>元素之間的間距為10px。

通過以上幾個案例，我們可以看到，可以使用不同的CSS布局方式來實現(xiàn)讓兩個<div>元素并排居中展示。具體選擇哪種方式，可以根據(jù)實際需求和布局的復(fù)雜度來進行選擇。