[分享]css中怎么使div水平居中显示

是html中最常使用的元素之一，它主要是用来定义一个块级区域。在网页设计中，我们经常会遇到需要将一个div水平居中显示的需求，今天我们就来学习一下如何用css来实现这个效果。
首先，我们需要明确一下，要使一个div水平居中显示，我们需要使用margin属性来设置margin-left和margin-right的值。下面是一个简单的例子：

<div class="container">
  <p>这是一个div。</p>
</div>

<style>
.container {
  margin-left: auto;
  margin-right: auto;
  width: 50%;
  height: 200px;
  background-color: #ccc;
}
</style> 

在上面的例子中，我们首先定义了一个container类的div，并设置了其宽度为50%，高度为200px，背景颜色为灰色。然后，在样式中我们将margin-left和margin-right的值都设置为auto，这样就可以让这个div水平居中显示了。
此外，我们还可以使用flexbox来实现div的水平居中。下面是一个使用flexbox的例子：

<div class="container">
  <p>这是一个div。</p>
</div>

<style>
.container {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 50%;
  height: 200px;
  background-color: #ccc;
}
</style> 

在上面的例子中，我们将container类的div的display属性设置为flex，然后设置了justify-content属性和align-items属性的值都为center，这样就可以让这个div在水平和垂直方向都居中了。当然，我们还需要设置一些其他的样式，比如设置div的宽度、高度、背景颜色等。
综上所述，使用css使div水平居中显示其实并不难，只需要使用margin属性或flexbox即可。相信大家掌握了这个技巧后，可以更灵活地进行网页设计了。