css中怎样使div水平居中显示

初学者在学习CSS时会遇到一些问题，比如如何把DIV居中显示。在这里，我们将向您介绍一些简单的技巧，以使这一过程变得更加简单。
首先，让我们看看HTML使用的代码：

<div class="main">
  <p>这是一个DIV居中显示的示例</p>
</div> 

我们将其保存为一个HTML文件并打开，在浏览器中我们可以看到DIV显示在页面的左上角。那么，我们该如何使它居中？
首先，我们需要添加以下CSS代码：

.main {
  width: 70%;  /* 设置DIV宽度 */
  margin: 0 auto;  /* 左右居中 */
} 

我们使用“margin: 0 auto;”来使DIV左右居中。这一技巧在网页设计中非常常见，我们通常使用它来居中设计元素。
需要注意的是，我们必须定义DIV的宽度，否则“margin: 0 auto;”将无法使它居中。
现在让我们来重新查看HTML代码：

<div class="main">
  <p>这是一个DIV居中显示的示例</p>
</div> 

以及CSS代码：

.main {
  width: 70%;  /* 设置DIV宽度 */
  margin: 0 auto;  /* 左右居中 */
} 

现在，我们可以在浏览器中看到DIV已经居中显示。
总结：如何使DIV居中显示？
- 增加CSS样式表，并定义一个DIV类
- 设置DIV的宽度
- 使用“margin: 0 auto;”设置左右居中
这是一个简洁而有效的技巧，可以帮助您在网页设计中快速实现DIV的居中显示。