Question

我有一个元素，我垂直定位如下：

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

这会在屏幕中间直接弹出。问题是我有一个页脚，所以div总是要高出150px以使div居中。

有没有办法结合使用sass函数或calc（）来让我的div向上移动？

Answer 1

您可以在顶部使用calc：

top: calc(50% - 150px);

或者，负余量可以起作用：

margin-top: -150px;

Answer 2

现在，大多数现代浏览器都支持calc()以及top内的translateY。请查看下面的代码段以供参考。有关浏览器支持，请参阅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（）

2 个答案: