是否有可能在使用position:absolute(或最佳替代方案)后恢复文档流?

Question

我一直在努力想出一个好的解决方案来居中一个div。我不喜欢杂乱的html，我不喜欢有2或3个不必要的div只是为了居中的东西。所以我决定用position:absolute

现在我知道位置:绝对中断了文档的流程，这就是为什么会发生这种情况，但是有没有一种方法来"恢复"文档的流程?

现在，我有一个div，宽度100%，高度20%，垂直居中。这个div包含一个段落，我在页面的底部有另一个段落元素(在这个div之外)-但是因为我使用position:absolute，版权声明在div之前出现

有没有办法让我们的文档回到正常的流程?我不想不得不将margin-top: npx;设置为页面上出现在div之后的每个元素。

---

JSFiddle:

HTML:

<div id="container">
    <p>Hi lol</p>
</div>
<p>Copyright Notice here</p>

CSS:

*
{
    outline: none; outline: 0; border: none; border: 0; margin: 0; padding: 0;
}
#container
{
    width: 100%;
    height: 20%;
    position: absolute;
    left: 0%;
    right: 0%;
    top: 40%;
    bottom: 40%;
    background-color: khaki;
}
p
{
    text-align: center;
}

Answer 1

也把你的版权段落设置在绝对底部。

p { position: absolute; bottom: 0px; /* or any appropriate position */ }