多个div垂直居中排列并且均匀分布

可以使用Flex布局实现多个div垂直居中排列并且均匀分布。以下是实现的代码示例：

HTML代码：

<div class="container">
  <div class="item"></div>
  <div class="item"></div>
  <div class="item"></div>
  <div class="item"></div>
</div>

CSS代码：

.container {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100vh;
}

.item {
  width: 100px;
  height: 100px;
  margin: 10px;
  background-color: #ccc;
}

解释：

通过设置容器的display属性为flex，可以使其成为一个Flex容器。通过设置justify-content属性为center，可以使所有项目水平居中对齐。通过设置align-items属性为center，可以使所有项目垂直居中对齐。通过设置项目的margin属性，可以让项目之间有一定的间隔。通过设置项目的宽度和高度，可以定义每个项目的大小。