css两个div垂直居中

父容器 {
  display: flex; /* 将父容器设置为flex布局 */
  align-items: center; /* 将子元素垂直居中 */
} 

在上面的代码中，将父容器设置为flex布局，并且使用align-items属性将子元素垂直居中。这样子元素就可以垂直居中了。

接下来，我们实现一个示例。代码如下：

.container {
  height: 200px; /* 设置父容器高度 */
  display: flex; /* 将父容器设置为flex布局 */
  align-items: center; /* 将子元素垂直居中 */
  justify-content: center; /* 将子元素水平居中 */
}

.item {
  width: 100px; /* 设置子元素宽度 */
  height: 100px; /* 设置子元素高度 */
  background-color: #ccc; /* 设置子元素背景颜色 */
} 

在上面的代码中，我们定义了一个父容器.container和一个子元素.item，然后使用flex布局将子元素垂直和水平居中。

具体效果可以查看以下示例代码：

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

以上就是通过CSS的flex布局将两个