Html 位置绝对断开父对象

我想在

正文
内登录
。目前，一切看起来都符合要求，但如果我检查它，我可以看到它实际上不在
主体的区域中：


我可以通过以下方式解决这个问题：

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

但那会把身体弄坏的。如何在使元素保持正常工作流程的同时解决此问题？
这能解决您的问题吗

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

原因
高度：100%
如果没有
位置：绝对，则无法工作
是因为
.login
的父级没有100%的页面。它只有
主体高度的100%，这非常小：它的作用与默认
位置：静态的作用相同。提供更详细的信息。
将以下内容添加到代码中：

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

您不需要使用position:absolute，而是使用margin:0 auto

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

请在你的问题中发布一个完整的代码示例。无论如何，我想被接受的答案是可以接受的，但最终的结果仍然很糟糕。除非你真的需要古老的浏览器支持，否则我会这样做：。Flexbox适合垂直和水平居中：明白！谢谢Jaunt，没用！有趣的是，视觉表达是完美的，但后面的错误线条让我感到困扰。完全不使用绝对定位是一个更好的答案。@Shikkediel，这里发布的答案中没有一个使用绝对定位。但这是唯一不能解决问题的答案。演示：这是因为
.login\u box
上多余的样式尚未删除。明白。但我看不出这个答案是如何解决这个问题的，而这个问题中所引用的
位置：绝对
。如果此答案是指您的
.login\u box
规则，则应在答案中进行解释。我希望在垂直和水平方向上居中，因此我无法使用边距0自动。