Html 基于流体边距不工作，将文本居中到页面

我一直在尝试将文本设置为屏幕的中心。因此，我在正文中直接放置了一个div，其中包含一些文本，并将高度添加为50%，边距顶部添加为50%。我认为这将保持该部门50%的领先地位。但我错了

HTML:

你对它行为不端的原因有什么看法吗？请不要提出任何新想法。我知道把它放在中心的其他想法。但我想知道为什么这个片段不起作用

---

这主要是一个“50%与什么有关”的问题

将

div

的高度设置为

50%

将使其容器的高度达到50%，在本例中为

主体

元素

将

边距顶部设置为
50%
，然后将顶部边距设置为
div
宽度的一半

请参见SO上的此问题以了解澄清：

此外，上边距应用于父级和
div
的上边缘之间，而不是垂直中心

所有这些因素都在导致
div
未集中在其容器中起作用。
试试这个

 html, body {
        width:100%;
        height:100%;
        margin:0;

    }
div {
    width:100%;
    height:50%;
  overflow: auto;
  margin: auto;
  position: absolute;
  top: 0;
  left: 0;
  bottom: 0; 
   right: 0;
    text-align:center;
    border:1px solid black;
}

最好使用堆栈溢出的
代码片段
特性，而不是提供指向JSFIDLE的链接。我认为页边顶部百分比将根据其父级高度计算。我错了吗？？请解释一下。并提供相关链接。我编辑了答案，添加了指向另一个问题的链接，以解决此问题。
html, body {
    width:100%;
    height:100%;
    margin:0;
}
div {
    margin-top:50%;  
    text-align:center;
    width:100%;
    height:50%;
}

 html, body {
        width:100%;
        height:100%;
        margin:0;

    }
div {
    width:100%;
    height:50%;
  overflow: auto;
  margin: auto;
  position: absolute;
  top: 0;
  left: 0;
  bottom: 0; 
   right: 0;
    text-align:center;
    border:1px solid black;
}