一起使用 translate 和 calc()

Question

我有一个垂直放置的元素，如下所示：

position: absolute;
top: 50%;
transform: translateY(-50%)

这会直接在屏幕中间弹出。问题是我有一个页脚，所以 div 总是必须再高 150px 才能使 div.

居中

有没有办法结合 sass 函数或 calc() 来让我的 div 向上移动？

Answer 1

您可以在顶部使用计算器：

top: calc(50% - 150px);

或者负边距可以工作：

margin-top: -150px;

Answer 2

现在大多数现代浏览器在 top 和内部 translateY 上都支持 calc()。检查以下代码段以供参考。如需浏览器支持，请在 caniuse

中查看

.parent {
  height: 200px;
  position: relative;
  background: #ccc;
}

.child {
  position: absolute;
  min-height: 50px;
  width: 100%;
  background: cyan;
  top: 50%;
  transform: translateY(calc(-50% - 50px));
}

.footer {
  position: absolute;
  bottom: 0;
  height: 50px;
  width: 100%;
  background: red;
}

<div class="parent">
  <div class="child">
  </div>
  <div class="footer">
  </div>
</div>

一起使用 translate 和 calc()

Using translate and calc() together

css

css-position

absolute

calc