CSS是前端開發中不可或缺的技術，其中自動換行是很多開發者經常要用到的功能，特別是在制作網頁布局時，經常需要使用自動換行的DIV。下面我們就來通過代碼演示這一功能。

<div class="wrap">
<div class="box">這是第一個div</div>
<div class="box">這是第二個div</div>
<div class="box">這是第三個div</div>
<div class="box">這是第四個div</div>
<div class="box">這是第五個div</div>
<div class="box">這是第六個div</div>
<div class="box">這是第七個div</div>
<div class="box">這是第八個div</div>
</div>
/* CSS */
.wrap {
width: 500px;
margin: 0 auto;
}
.box {
width: 200px;
height: 100px;
background: #ccc;
margin: 10px;
float: left;
}

上面是我們使用CSS實現自動換行的方法。具體實現方法是使用float屬性讓每個DIV都向左浮動起來，然后父級容器會根據子元素的大小自適應寬度，這樣就實現了我們想要的自動換行的效果。如果瀏覽器窗口大小發生變化，也可以自適應寬度。

如果我們想要實現DIV居中的效果，可以給父級容器添加text-align:center屬性，這樣子元素就會在父容器中水平居中了。如果想要垂直居中，則可以使用display:table-cell;vertical-align: middle;屬性來實現。

總之，CSS自動換行DIV是前端開發中非常常用的功能，使用float屬性可以很方便地實現，使網頁布局更加美觀。