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>