<div>是HTML中的一個元素，用于定義文檔中的一個區域或一個容器。當我們需要在網頁中使用多個<div>元素時，有時候我們希望這些元素能夠自動換行并且居中顯示。下面將通過幾個代碼案例來詳細解釋并演示如何實現<div>元素的換行和居中顯示。

，我們可以使用CSS中的display屬性來實現<div>元素的換行。默認情況下，<div>元素會在一行顯示，如果希望它能夠換行顯示，我們可以將display屬性設置為"block"。例如：

<p><style>
div {
display: block;
}
</style></p>

上述代碼中，我們為所有的<div>元素設置了display屬性為"block"，這樣每個<div>元素都會單獨占據一行顯示，實現了換行的效果。

接下來，我們再來看如何實現<div>元素的居中顯示。為了在水平方向上居中顯示<div>元素，我們可以使用CSS中的text-align屬性。例如：

<p><style>
div {
text-align: center;
}
</style></p>

上述代碼中，我們為所有的<div>元素設置了text-align屬性為"center"，這樣每個<div>元素都會在其父元素中水平居中顯示。

如果我們希望在垂直方向上居中顯示<div>元素，我們可以使用CSS中的vertical-align屬性。例如：

<p><style>
.container {
display: flex;
align-items: center;
justify-content: center;
}
</style></p>
<br>
<p><div class="container">
<div>內容</div>
</div></p>

上述代碼中，我們創建了一個外層的容器<div>，并給它添加了一個類名"container"。然后，我們使用CSS的flex布局，通過align-items屬性設置為"center"和justify-content屬性設置為"center"來將內部的<div>元素在垂直和水平方向上都居中顯示。

綜上所述，通過設置display屬性來實現<div>元素的換行顯示，通過text-align屬性和vertical-align屬性來實現<div>元素的居中顯示。通過這些方法，我們可以輕松地實現<div>元素的換行和居中效果，使網頁顯示更加美觀和易讀。