写出div在不固定高度的情况下水平垂直居中的方法？

在前端开发中，有多种方法可以实现一个 div 在不固定高度的情况下水平垂直居中。以下是其中的几种方法：

1. 使用 Flexbox（推荐）

Flexbox 是一种现代的布局方式，可以轻松实现元素的水平垂直居中。

<div class="container">
  <div class="content">
    <!-- 内容 -->
  </div>
</div>

.container {
  display: flex;
  justify-content: center; /* 水平居中 */
  align-items: center; /* 垂直居中 */
  height: 100vh; /* 假设容器高度为视口高度 */
}

.content {
  /* 内容样式 */
}

2. 使用 CSS Grid

CSS Grid 也是一种强大的布局系统，可以实现复杂的布局需求。

<div class="container">
  <div class="content">
    <!-- 内容 -->
  </div>
</div>

.container {
  display: grid;
  place-items: center; /* 水平垂直居中 */
  height: 100vh; /* 假设容器高度为视口高度 */
}

.content {
  /* 内容样式 */
}

3. 使用定位和转换（适用于较老的浏览器）

这种方法利用了 CSS 的 position 和 transform 属性。

<div class="container">
  <div class="content">
    <!-- 内容 -->
  </div>
</div>

.container {
  position: relative;
  height: 100vh; /* 假设容器高度为视口高度 */
}

.content {
  position: absolute;
  top: 50%; /* 向下偏移容器高度的50% */
  left: 50%; /* 向右偏移容器宽度的50% */
  transform: translate(-50%, -50%); /* 向上和向左偏移自身宽高的50%，实现居中 */
}

4. 使用表格和表格单元格（不推荐，仅供了解）

这种方法较为古老，不推荐在现代项目中使用，但可以在一些特定场景下作为备选方案。

<div class="table">
  <div class="table-cell">
    <!-- 内容 -->
  </div>
</div>

.table {
  display: table;
  width: 100%; /* 宽度为100% */
  height: 100vh; /* 假设容器高度为视口高度 */
}

.table-cell {
  display: table-cell;
  text-align: center; /* 水平居中 */
  vertical-align: middle; /* 垂直居中 */
}

在这些方法中，我推荐使用 Flexbox 或 CSS Grid，因为它们提供了更强大和灵活的布局控制能力，并且兼容性也越来越好。