具有可变高度的中心 div - CSS

有时候我们需要在页面中将一个 div 元素置于页面的中心，并且这个 div 元素的高度是可变的，如何实现呢？本文将介绍一种基于 CSS 的实现方法。

步骤

1. 首先，将我们要置于中心的 div 元素设置为绝对定位（position: absolute）。

.center {
  position: absolute;
}

2. 接下来，我们需要添加一个额外的父容器，将这个父容器设置为相对定位（position: relative）。我们将这个父容器命名为 .wrapper。

.wrapper {
  position: relative;
}

3. 将 .center 元素绝对定位到 .wrapper 元素的中心。

.center {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

这里的 transform: translate(-50%, -50%); 的作用是将 .center 元素向上和向左移动其自身高度和宽度的一半（即居中）。

4. 最后，将 .wrapper 元素的高度设置为 100%，这样 .center 元素就可以自适应 .wrapper 元素的高度。

.wrapper {
  position: relative;
  height: 100%;
}

完整代码

html,
body {
  height: 100%;
  margin: 0;
}

.wrapper {
  position: relative;
  height: 100%;
}

.center {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

总结

这种方法是一种基于 CSS 的简单而有效的实现方式，可以将任何具有可变高度的 div 元素置于页面的中心。同时，不需要使用 JavaScript，只需要几行 CSS 代码就可以搞定。