CSS是前端開發中非常重要的一項技術，通過對CSS的深入掌握，我們可以輕松實現網頁的布局和美化。而其中，讓div布局居中也是我們經常會用到的一個技巧。

首先我們需要在HTML文檔中定義一個div元素：

<div id="box"></div>

接下來我們在CSS文檔中設置div的寬度和高度，并將其居中顯示：

#box {
width: 500px;
height: 300px;
margin: 0 auto;
}

以上代碼中，我們使用了margin屬性來設置div的外邊距，其中0表示上下外邊距為0，auto表示左右外邊距自動調整，也就是將div居中顯示。注意，在使用margin:auto來設置水平居中時，需要將div的display屬性設置為block或者inline-block。

如果我們需要將div水平和垂直都居中呢？這時我們可以使用flex布局來實現：

body {
display: flex;
justify-content: center;
align-items: center;
}
#box {
width: 500px;
height: 300px;
}

以上代碼中，我們在body元素上使用flex屬性，并設置justify-content和align-items分別為center來實現水平和垂直居中。需要注意的是，flex布局只適用于現代瀏覽器。

通過以上方法，我們可以輕松實現div的居中顯示，讓網頁的布局更加美觀和舒適。