位置绝对中断父[关闭]答案

【问题标题】：Position absolute break parent [closed]位置绝对中断父[关闭]
【发布时间】：2015-12-24 09:15:13
【问题描述】：

我想在body 中居中.login。目前一切看起来都符合预期，但是如果我检查它，我可以看到它实际上不在body 的区域：

我可以解决它：

.login {
 position: absolute;
 width: 100%;
 height: 100%;
}

但这会破坏身体。如何在保持元素处于正常工作流程的同时解决此问题？

【问题讨论】：

请在您的问题中发布完整的代码示例。
无论如何，我想接受的答案是可以接受的，但最终结果仍然很糟糕。除非你真的需要过时的浏览器支持，否则我会选择这样的：codepen.io/anon/pen/yYVgQB?editors=010.
Flexbox 适合垂直和水平居中：stackoverflow.com/a/33049198/3597276

【解决方案1】：

这能解决您的问题吗？

html,body,.login{
  height:100%;
  margin:0;
}

没有position: absolute;，height:100% 不起作用的原因是.login 的父级没有 100% 的页面。它的高度只有 body 的 100%，非常小：它的作用与默认的 position:static 相同。 This answer 提供了更多细节。

【讨论】：

【解决方案2】：

将此添加到您的代码中：

html, body { height: 100%; }
.login { height: 100%; }

【讨论】：

【解决方案3】：

你不需要使用 position:absolute，使用 margin:0 auto 代替它

.login {
   width: 360px;
   margin:0 auto;
}

【讨论】：

完全不使用绝对定位是一个更好的答案。
@Shikkediel，这里发布的答案都没有使用绝对位置。但这是没有解决问题的唯一答案。演示：codepen.io/anon/pen/EVNZPY
那是因为.login_box上的多余样式没有被删除。
明白。但我看不出这个答案如何解决该代码，这不是问题中引用的position: absolute。如果此答案是指您的.login_box 规则，则应在答案中进行说明。
我想在垂直和水平方向居中，所以我不能使用自动边距 0。