在網頁設計中，CSS布局是一個非常重要的方面。其中，div元素是最常用的布局元素之一。接下來，我們將介紹一些div CSS布局的源代碼。

/* 居中布局 */
div {
width: 200px;
height: 200px;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
/* 兩欄布局 */
div.container {
display: flex;
}
div.left {
width: 30%;
}
div.right {
width: 70%;
}
/* 網格布局 */
div.container {
display: grid;
grid-template-columns: repeat(3, 1fr);
}
div.item {
background-color: #ccc;
padding: 20px;
text-align: center;
}

以上代碼中，第一段是一個居中布局。它通過設置元素的寬度、高度和位置，實現了在網頁中居中顯示的效果。

第二段是一個兩欄布局。通過將一個容器元素設置為flex布局，再將子元素分為左、右兩欄，實現了左右分欄的效果。

第三段是一個網格布局。它使用了CSS的grid屬性，將一個容器分為三列，每列寬度相等。然后，將每個子元素放入到網格中，實現了網格布局的效果。