CSS：将div向上移动其高度的一半？

Question

在 CSS 中，我想将 div 向上移动其高度的一半，其中未明确指定其高度；它基于其内容的大小。这可以是top或margin-top。有谁知道如何做到这一点？如果我这样做，margin-top: 50%我知道 50% 将是父级宽度的 50%，而不是 div 高度的 50%。

Answer 1

你可以尝试transform: translateY(-50%)

在为平移分配百分比单位时，距离是通过相应的轴计算的，因此translateY(-50%)是根据其高度计算的。

body {
  width: 100vw;
  height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}

div {
  width: 100px;
  height: 100px;
  background-color: salmon;
}

div:hover {
  transform: translateY(-50%);
}

<div>Hover me</div>