<div>是HTML中的一個(gè)標(biāo)簽，可以用來(lái)創(chuàng)建一個(gè)獨(dú)立的區(qū)塊，它可以包含文本、圖像、鏈接或其他HTML元素。有時(shí)候，我們需要將兩個(gè)<div>并列排列，并且使它們居中顯示。本文將通過(guò)幾個(gè)代碼案例，詳細(xì)解釋如何實(shí)現(xiàn)這個(gè)效果。
第一個(gè)案例中，我們使用了CSS的float屬性和margin屬性。，將兩個(gè)<div>都設(shè)置為float:left，這樣它們就會(huì)并列排列。然后，給這兩個(gè)<div>設(shè)置一個(gè)公共的父<div>，并設(shè)置它的margin屬性為auto，則父<div>會(huì)自動(dòng)居中顯示。

<p><div style="width: 400px; height: 200px; border: 1px solid black; margin: 0 auto;">
<div style="float: left; width: 100px; height: 100px; background-color: red;"></div>
<div style="float: left; width: 100px; height: 100px; background-color: blue;"></div>
</div></p>

在第二個(gè)案例中，我們使用了CSS的display屬性和margin屬性。，將兩個(gè)<div>都設(shè)置為display:inline-block，這樣它們也會(huì)并列排列。然后，給這兩個(gè)<div>設(shè)置一個(gè)公共的父<div>，并設(shè)置它的margin屬性為auto，則父<div>同樣會(huì)自動(dòng)居中顯示。

<p><div style="width: 400px; height: 200px; border: 1px solid black; text-align: center;">
<div style="display: inline-block; width: 100px; height: 100px; background-color: red;"></div>
<div style="display: inline-block; width: 100px; height: 100px; background-color: blue;"></div>
</div></p>

第三個(gè)案例中，我們使用了CSS的flexbox布局。在父<div>中，使用display:flex將其內(nèi)部元素變?yōu)橐粋€(gè)flex容器。然后，設(shè)置justify-content屬性為center，這會(huì)使子元素在水平方向上居中對(duì)齊。

<p><div style="width: 400px; height: 200px; border: 1px solid black; display: flex; justify-content: center;">
<div style="width: 100px; height: 100px; background-color: red;"></div>
<div style="width: 100px; height: 100px; background-color: blue;"></div>
</div></p>

這些案例展示了如何在<div>中創(chuàng)建兩個(gè)并列的<div>并使它們居中顯示的方法。通過(guò)使用float屬性、display屬性或flexbox布局，我們可以輕松實(shí)現(xiàn)這個(gè)效果。無(wú)論是哪種方式，都可以根據(jù)項(xiàng)目的需求選擇適合的方法來(lái)達(dá)到理想的效果。