如何在div中垂直居中具有可变高度的内容？

在div中垂直居中具有可变高度的内容，可以使用CSS的Flexbox布局方式。以下是一个简单的示例：

HTML代码：

<div class="container">
  <div class="content">
    这是一个可变高度的内容
  </div>
</div>

CSS代码：

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

.content {
  width: 50%;
  text-align: center;
}

在这个示例中，我们将父div的display属性设置为flex，并使用justify-content和align-items属性将子div垂直和水平居中。同时，我们将父div的高度设置为100vh，以确保它占据整个视口高度。子div的宽度可以根据需要进行调整。

这种方法适用于具有可变高度的内容，并且可以很容易地在不同尺寸的屏幕上实现响应式布局。