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

在 div 高度不固定的情况下，实现水平垂直居中的方法有很多，以下是几种常见且有效的方法：

1. Flexbox 布局 (推荐):

这是现代 CSS 中最简洁和灵活的解决方案。

.container {
  display: flex;
  justify-content: center; /* 水平居中 */
  align-items: center; /* 垂直居中 */
  min-height: 100vh; /* 确保容器高度足够 */
}

.centered-div {
  /* 其他样式 */
}

• .container 是父容器，.centered-div 是需要居中的 div。
• min-height: 100vh; 确保父容器至少占满视口高度，这样垂直居中才能生效。如果父容器高度已知，可以设置为固定高度。

2. Grid 布局:

Grid 布局也能轻松实现水平垂直居中。

.container {
  display: grid;
  place-items: center; /* 简写形式，等同于 align-items: center; justify-items: center; */
  min-height: 100vh; /* 确保容器高度足够 */
}

.centered-div {
  /* 其他样式 */
}

• place-items: center; 是 align-items: center; 和 justify-items: center; 的简写形式。

3. Transform + Absolute Positioning:

这种方法需要知道子元素的尺寸，或者使用 transform 的 translate 函数进行动态计算。

.container {
  position: relative;
  min-height: 100vh; /* 确保容器高度足够 */
}

.centered-div {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%); /* 使用 transform 实现真正的居中 */
  /* 其他样式 */
}

• top: 50%; 和 left: 50%; 将元素的左上角定位到容器的中心。
• transform: translate(-50%, -50%); 将元素向左上方偏移自身宽度和高度的一半，从而实现真正的居中。

4. Table-cell 方法 (较老的方法，不推荐):

这种方法利用表格单元格的垂直居中特性。

.container {
  display: table;
  width: 100%;
  height: 100vh; /* 或固定高度 */
}

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

.centered-div {
  display: inline-block; /* 允许设置 margin */
  /* 其他样式 */
}

这种方法需要嵌套多个 div，代码结构略显复杂，现在更推荐使用 Flexbox 或 Grid。

总结:

• Flexbox 和 Grid 布局是现代 CSS 中实现水平垂直居中的最佳选择，代码简洁易懂，兼容性好。
• Transform 方法也比较常用，但需要额外注意父元素的定位方式。
• Table-cell 方法较为老旧，代码结构复杂，不推荐使用。

选择哪种方法取决于你的具体需求和项目上下文。 如果不需要兼容非常老的浏览器，强烈推荐使用 Flexbox 或 Grid 布局。