div 自動對齊是指使用 CSS 中的 display 屬性來實現自動對齊效果。HTML 中的 div 元素是一種通用的塊級元素，常用于布局和組織頁面內容。當需要多個 div 元素自動對齊時，可以使用 CSS 來控制其顯示方式，以實現水平或垂直對齊。
下面將通過幾個代碼案例來詳細解釋 div 自動對齊的實現方法。
案例一：水平對齊 假設有三個 div 元素需要水平對齊。可以使用 CSS 的 display 屬性將這些 div 元素變成行內元素，然后通過 text-align 屬性來實現水平對齊效果。

html
<style>
.container {
text-align: center;
}
<br>
  .box {
display: inline-block;
width: 100px;
height: 100px;
background-color: red;
margin: 10px;
}
</style>
<br>
<div class="container">
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
</div>

在上面的代碼中，將包含這三個 div 元素的父元素設置為 container 類，并將 text-align 屬性設置為 center，實現了水平對齊效果。同時，通過給每個 div 元素添加 box 類來設置寬度、高度、背景顏色和邊距等樣式。這樣就實現了三個 div 元素水平居中對齊的效果。
案例二：垂直對齊 假設有三個 div 元素需要垂直對齊。可以使用 CSS 的 display 屬性將這些 div 元素變成塊級元素，然后通過設置 margin 屬性來實現垂直對齊效果。

html
<style>
.container {
display: flex;
align-items: center;
height: 300px;
background-color: lightgray;
}
<br>
  .box {
width: 100px;
height: 100px;
background-color: red;
margin: 10px auto;
}
</style>
<br>
<div class="container">
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
</div>

在上面的代碼中，將包含這三個 div 元素的父元素設置為 container 類，并通過 display 屬性設置為 flex 布局。然后利用 align-items 屬性設置為 center 來實現垂直對齊效果。給每個 div 元素添加 box 類來設置寬度、高度、背景顏色和邊距等樣式。這樣就實現了三個 div 元素垂直居中對齊的效果。
以上是兩個基本的 div 自動對齊的案例，但在實際開發中，有許多其他的應用場景也可以用到 div 自動對齊。例如，可以通過針對不同屏幕尺寸設置不同的 CSS 樣式來實現響應式布局，從而實現 div 元素在不同設備上的自動對齊。此外，還可以通過使用 CSS3 的 flexbox、grid 等布局模塊來進一步優化自動對齊效果，達到更好的布局和視覺效果。
總之，div 自動對齊是通過使用 CSS 的 display 屬性來控制元素的顯示方式，實現水平或垂直對齊的效果。通過靈活應用各種 CSS 屬性和布局模塊，可以實現各種復雜的自動對齊布局。在實際應用中，可以根據需求選擇最適合的方法來實現自動對齊效果，以實現更好的用戶體驗和視覺效果。