本文目錄導讀：
CSS實現(xiàn)兩個div元素并排居中的方法
在網(wǎng)頁設計中，我們經(jīng)常需要將兩個div元素并排居中，以提供更好的用戶體驗和頁面布局，下面介紹幾種使用CSS實現(xiàn)這一效果的方法。
使用Flex布局
Flex布局是一種強大的CSS布局方式，可以輕松實現(xiàn)元素的并排居中，為父元素設置display: flex;屬性，然后使用justify-content: space-between;使子元素在水平方向上均勻分布，示例代碼如下：
HTML:
<div class="parent"> <div class="child">Div 1</div> <div class="child">Div 2</div> </div>
CSS:
.parent {
display: flex;
justify-content: space-between;
}
.child {
width: 50%; /* 根據(jù)需要調(diào)整寬度 */
}使用Grid布局
Grid布局是另一種實現(xiàn)元素并排的CSS方法，為父元素設置display: grid;屬性，然后使用grid-template-columns來定義列，示例代碼如下：
HTML:
<div class="parent"> <div class="child">Div 1</div> <div class="child">Div 2</div> </div>
CSS:
.parent {
display: grid;
grid-template-columns: 1fr 1fr; /* 創(chuàng)建兩列 */
justify-content: center; /* 使grid居中 */
}
.child { /* 可選樣式 */
background-color: #f0f0f0; /* 為子元素添加背景色以區(qū)分 */
}使用浮動和居中對齊屬性
首先給兩個div設置寬度，然后使用margin屬性使它們并排顯示，接著利用text-align屬性使它們居中顯示，示例代碼如下：首先給兩個div設置寬度，然后使用margin屬性使它們并排顯示，接著利用text-align屬性使它們居中顯示，示例代碼如下：HTML部分不變，CSS部分如下： ``css .parent { text-align: center; } .child { float: left; /* 或者使用flex布局中的margin屬性進行水平間距調(diào)整 */ width: 50%; margin-right: 5px; /* 可選樣式 */ background-color: #f0f0f0; /* 為子元素添加背景色以區(qū)分 */ }`` 以上三種方法都可以實現(xiàn)兩個div元素的并排居中效果，在實際應用中可以根據(jù)具體需求和場景選擇合適的方法，這些方法也可以擴展到更多的元素和更復雜的布局中。
