多个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属性，可以让项目之间有一定的间隔。通过设置项目的宽度和高度，可以定义每个项目的大小。

相关问题

多个div垂直居中排列

可以通过使用flex布局来实现多个div垂直居中排列，具体实现步骤如下：

1. 父元素设置为flex布局，并设置flex-direction属性为column，这样子元素就可以按垂直方向排列。

.parent {
  display: flex;
  flex-direction: column;
}

2. 子元素设置为flex布局，并设置align-items属性为center，这样子元素就可以在垂直方向上居中。

.child {
  display: flex;
  align-items: center;
}

3. 重复以上步骤对所有子元素进行设置，即可实现多个div垂直居中排列。

完整的示例代码如下：

<div class="parent">
  <div class="child">第一个div</div>
  <div class="child">第二个div</div>
  <div class="child">第三个div</div>
</div>

<style>
.parent {
  display: flex;
  flex-direction: column;
}

.child {
  display: flex;
  align-items: center;
  height: 50px;
  border: 1px solid #ccc;
  margin-bottom: 10px;
}
</style>

div中多个div垂直居中

可以使用 flex 布局实现多个子元素在父元素中垂直居中。具体实现如下：

HTML结构：

<div class="parent">
  <div class="child"></div>
  <div class="child"></div>
  <div class="child"></div>
</div>

CSS样式：

.parent {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 300px; /* 父元素高度 */
}

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

在父元素上设置 `display: flex;`，然后使用 `align-items: center;` 和 `justify-content: center;` 分别设置子元素在纵向和横向上的居中方式。这样就可以实现多个子元素在父元素中垂直居中了。