给一个垂直居中css代码示例

当需要将一个元素在其父元素中垂直居中时，可以使用以下 CSS 代码示例：

HTML 代码：

<div class="parent">
  <div class="child">
    <!-- 垂直居中内容 -->
  </div>
</div>

CSS 代码：

.parent {
  display: flex;
  justify-content: center;
  align-items: center;
  /* 可选：设置父元素为固定高度 */
  height: 300px;
}

.child {
  /* 可选：设置子元素为固定宽度和高度 */
  width: 200px;
  height: 100px;
}

在上述示例中，`.parent` 是父元素，`.child` 是需要垂直居中的子元素。通过将父元素的 `display` 属性设置为 `flex`，并使用 `justify-content: center;` 和 `align-items: center;` 将子元素水平和垂直居中。

这样，无论子元素的高度如何变化，它都会始终垂直居中在父元素中。你可以根据实际需要调整父元素和子元素的宽度、高度和其他样式属性。