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的居中显示，让网页的布局更加美观和舒适。