div 平鋪居中是一種常見的網頁布局技術，它可以使多個 div 元素在頁面中水平居中且依次排列，不論頁面寬度如何變化。這種布局方式通常用于創建圖片或文本瀑布流、導航欄、圖標展示等設計元素。在下面的幾個代碼案例中，我將用不同的方法來詳細解釋和演示如何實現 div 平鋪居中的效果。
第一種方法是使用 display: flex 和 justify-content: center 屬性來實現 div 元素的平鋪居中。這種方法適用于較新版本的瀏覽器，代碼示例如下：

<style>
.container {
display: flex;
justify-content: center;
}
<br>
.item {
width: 200px;
height: 200px;
background-color: #ccc;
margin: 10px;
}
</style>
<div class="container">
<div class="item">1</div>
<div class="item">2</div>
<div class="item">3</div>
<div class="item">4</div>
</div>

在這個代碼示例中，創建了一個名為 container 的 div 容器，將其設置為 display: flex，使內部的元素水平排列。然后通過設置 justify-content: center 屬性，讓內部的元素在容器中水平居中。每個 item div 具有固定的寬度、高度和外邊距，形成平鋪居中的效果。
第二種方法是使用 display: inline-block 屬性和 text-align: center 屬性來實現 div 元素的平鋪居中。這種方法兼容性較好，代碼示例如下：

<style>
.container {
text-align: center;
}
<br>
.item {
display: inline-block;
width: 200px;
height: 200px;
background-color: #ccc;
margin: 10px;
}
</style>
<div class="container">
<div class="item">1</div>
<div class="item">2</div>
<div class="item">3</div>
<div class="item">4</div>
</div>

在這個代碼示例中，容器 div 的 text-align: center 屬性使內部元素在容器中水平居中。而每個 item div 則通過 display: inline-block 屬性來使其成為一個行內塊元素，從而使得它們可以水平排列。同樣地，每個 item div 具有固定的寬度、高度和外邊距。
綜上所述，我們可以使用 display: flex 或 display: inline-block 的方式來實現 div 元素的平鋪居中效果。這兩種方法在不同場景下都可以發揮作用，選擇哪一種方法取決于具體需求和瀏覽器兼容性。在實際應用中，我們可以根據項目需求和目標瀏覽器的支持情況選擇合適的方法，從而達到理想的頁面布局效果。