如何将div中的子元素垂直居中

要垂直居中子元素，可以使用 CSS 中的 display 属性将其设置为 flex，然后将子元素设置为 align-self: center。

具体实现方式如下：

<div class="container">
  <div class="child">
    子元素
  </div>
</div>

.container {
  display: flex;
}

.child {
  align-self: center;
}

在这个例子中，.container 中的 display 属性被设置为 flex，这将使其成为 flex 容器。然后，.child 中的 align-self: center 使子元素在其父容器中垂直居中。

如果你想在其他元素中实现垂直居中，可以将 align-self 的值更改为 center 或 top/bottom 等，具体取决于你想要实现的效果。

需要注意的是，align-self 属性只适用于已经设置为 flex 容器或 grid 容器的元素。如果你想要在 display: block 或 display: inline-block 等其他类型的容器中居中子元素，需要使用其他的方法，如使用 margin 属性来实现。