transform: translateY(-50%

`transform: translateY(-50%)` 是 CSS3 中的一个变形函数，用于水平方向上的位移操作。在这个表达式中，`translateY()` 是负责垂直移动的变换，`-50%` 表示相对于元素自身高度向下移动自身高度的一半。这意味着如果元素的高度是100px，那么`translateY(-50%)`会让元素的顶部对齐到其容器的中心点。

这种技巧常用于创建响应式的垂直居中效果，特别是在那些需要元素相对于父元素而不是页面进行居中的场景中，比如在一个相对固定高度的弹出框、卡片等元素中。

举个例子：

.container {
  position: relative;
}

.card {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 300px;
  height: 300px;
  background-color: #f00;
}

在这个例子中，`.card` 将会垂直和水平居中于 `.container` 内。

相关问题

transform: translateY(-50%）

`transform: translateY(-50%)` 是 CSS 的属性之一，用于对元素进行垂直方向的移动变换，其中 `-50%` 表示向上移动元素自身高度的一半。

具体来说，`translateY()` 函数用于沿着垂直方向移动元素的位置。它接受一个长度值或百分比作为参数，表示元素相对于自身的垂直偏移量。

在这个例子中，`translateY(-50%)` 表示将元素向上移动自身高度的一半，通常用于实现垂直居中的效果。

需要注意的是，`transform` 属性需要浏览器支持，并且在一些情况下可能会影响元素的布局和渲染。

@keyframes animate { 0%, 100%, { transform: translateY(-50px); } 50% { transform: translateY(50px); } }

这段 CSS 代码定义了一个名为 "animate" 的关键帧动画，其中包含两个关键帧（keyframes）：

- 第一个关键帧是在 0% 和 100% 处，表示在动画开始和结束时的状态。这个关键帧使用 transform 属性将元素向上移动 50 像素（translateY(-50px)）。
- 第二个关键帧是在 50% 处，表示动画中间的状态。这个关键帧使用 transform 属性将元素向下移动 50 像素（translateY(50px)）。

因此，这个关键帧动画会使得元素先向上移动 50 像素，然后再向下移动 50 像素，最终回到原来的位置，从而形成一个上下抖动的效果。这个关键帧动画可以通过将其应用到元素的 animation 属性来实现动画效果，例如：

div {
  animation: animate 1s ease-in-out infinite;
}

这个样式规则会使得 div 元素以 1 秒的周期无限循环播放 animate 关键帧动画，并且动画效果使用 ease-in-out 缓动函数。