在网页设计中，布局是至关重要的。一个优秀的布局不仅能够提升网页的美观度，还能提高用户体验。而CSS Div居中布局则是布局中的核心技术之一。本文将深入探讨CSS Div居中布局的技巧，帮助读者掌握这一技术，提升网页设计水平。
一、CSS Div居中布局的原理
CSS Div居中布局主要分为水平居中和垂直居中。水平居中是指将Div元素在父容器中水平居中显示，而垂直居中则是将Div元素在父容器中垂直居中显示。
1. 水平居中
水平居中可以通过以下几种方法实现：
（1）使用margin属性：将Div元素的左右margin设置为auto，即可实现水平居中。
（2）使用flex布局：利用flex布局的justify-content属性，将Div元素在父容器中水平居中。
（3）使用grid布局：利用grid布局的justify-items属性，将Div元素在父容器中水平居中。
2. 垂直居中
垂直居中可以通过以下几种方法实现：
（1）使用margin属性：将Div元素的上下margin设置为auto，即可实现垂直居中。
（2）使用flex布局：利用flex布局的align-items属性，将Div元素在父容器中垂直居中。
（3）使用grid布局：利用grid布局的align-items属性，将Div元素在父容器中垂直居中。
二、CSS Div居中布局的实践
1. 水平居中实践
以下是一个使用margin属性实现水平居中的示例代码：
```html
