保证金最高值似乎超出了我指定的值[重复]

我正在尝试将div居中显示在屏幕上。我已经无数次地使用了这种方法,但是这一次我将边距设置为最高50%时,往往会超出我指定的50%,在chrome上消失了,这很奇怪。 请帮我解决一下这个。

<style>
div{
width: 100px;
height: 100px;
position: absolute;
border: 2px solid;
margin-top: 50%;
margin-bottom: 50%;
transform: translate(-50%);
}
</style>
<body>
<div>Some text</div>
</body>