时间戳

首页 > 解决方案 > CSS：将div向上移动其高度的一半？

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

问题描述

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

标签： htmlcssmargin

解决方案

你可以试试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>

推荐阅读