Question

我试图在没有黑客的情况下这样做。

我的目标是将.paper元素放在页面中心，同时在页面和标题之间留出空格。

如您所见，我通过添加：

来集中.paper元素

margin-left: auto;
margin-right: auto;

然而，它是＆＃34;触摸＆＃34;标题现在。通常情况下，我会添加margin: 20px;以在它们之间放置一些空格，但现在这不是一个选项，因为它的居中方式。如何将.paper元素向下移动以不触及标题？（我不想要一个利润最高的黑客，因为它只是帮助主要问题）

Answer 1

您可以使用flex包装器和高度计算来完成此操作。

<强> CSS

.wrapper {
  align-items: center;
  display: flex;
  height: calc(100% - 2em); /*Subtract .header's height*/
  justify-content: center;
  width: 100%;
}

<强> HTML

<div class="header"></div>
<div class="wrapper">
  <div class="paper"></div>
</div>

https://jsfiddle.net/mooqc3p3/

Answer 2

由于您知道两个元素的高度，因此可以使用calc()创建上边距。

margin-top = 50vh - 50px - 25px    // half the heights of the viewport, the header, and the .paper

https://jsfiddle.net/8L4ud0e8/4/

但是，这显然只有在您拥有固定大小的元素且容器与视口的高度相同时才有效。

Answer 3

常见的解决方案可能是：

header {
  margin-bottom: 20px;
}

只需将空格添加到.header元素，而不是纸张。

Answer 4

如果您希望它在剩余空间中垂直居中：

    margin-top: calc(50vh - 100px);

在应用保证金时，如何将div放在页面中心？

4 个答案: