本文目錄導(dǎo)讀：

1. 使用Flex布局
2. 使用Grid布局

CSS布局技巧：實現(xiàn)兩個div元素水平對齊

在網(wǎng)頁設(shè)計中，我們經(jīng)常需要實現(xiàn)兩個或多個div元素的水平對齊，這可以通過使用CSS的多種布局技巧來實現(xiàn)，本文將為您詳細(xì)介紹這些方法，幫助您輕松實現(xiàn)兩個div的水平對齊。

使用Flex布局

Flex布局是一種強(qiáng)大的CSS布局方式，可以輕松實現(xiàn)元素的水平對齊，您可以通過為父元素設(shè)置display: flex;樣式，然后使用justify-content: space-between;或justify-content: space-around;來對齊子元素。

示例代碼：

HTML:

<div class="container">
  <div class="box">Div 1</div>
  <div class="box">Div 2</div>
</div>

CSS:

.container {
  display: flex;
  justify-content: space-between;
}
.box {
  /* 其他樣式 */
}

使用Grid布局

Grid布局是另一種實現(xiàn)元素水平對齊的有效方法，您可以為父元素設(shè)置display: grid;樣式，然后通過grid-template-columns來定義列布局。

示例代碼：

HTML:

<div class="grid-container">
  <div class="grid-item">Div 1</div>
  <div class="grid-item">Div 2</div>
</div>

CSS:

.grid-container {
  display: grid;
  grid-template-columns: 1fr 1fr; /* 創(chuàng)建兩列，每列等寬 */
}
.grid-item {
  /* 其他樣式 */
}