html - 如何让我的盒子不接触页面底部？

Question

我想知道一种方法，使我的盒子不会触及页面底部。我正在使用 Bootstrap 4，尝试了间距实用程序，但它似乎不起作用。

这是现在的图片，它实际上在页面的底部。

.signup {
  position:absolute;
  border:1px solid rgba(0,0,0,0.1);
  display:grid;
  place-content:center;
  padding:2em 2em;
  border-radius:6px;
}

标签： htmlcsstwitter-bootstrapbootstrap-4

Answer 1

您可以尝试像这样使用翻译：

.signup {
  transform: translateY(-10%)
}

我认为这position: absolute就是问题所在。

您可以访问此处以了解有关居中的更多信息：这非常有帮助！