Javascript 如何获得垂直对齐元素的正确顶部位置？

此页面尝试垂直对齐登录表单。当我试图通过JavaScript获得它的最高位置时，我得到了错误的结果，这与chrome开发者工具得到的结果是一样的（见附件屏幕截图）

有人能解释一下这个问题的原因吗？为什么连浏览器的本机工具都会受到影响？有没有办法通过JavaScript获得元素的正确位置

---

谢谢。

将未知高度的元素垂直居中是一种常见的方法

顶部位置设置为50%，使图元顶部位于父图元的中心（这50%与父图元高度相关）

元素以50%的垂直平移进行转换。这与图元高度有关，并使图元垂直移动，直到其中心位于父图元的中心

top: 50%;
transform: translateY(-50%);

得到的最大值在变换之前。这是正确的行为，但从视觉上可以看到已转换的元素

---

如果有人对如何通过Javascript检索元素的真实位置感兴趣，请查看->垂直->块级别->未知高度部分，这一点解释得更好：

使用获取元素在视口中的左/顶位置

然后获取视口相对于文档的位置。如果您想支持旧版本的IE，这有点棘手：

var viewport_left=（window.pageXOffset | document.documentElement.scrollLeft）-（document.documentElement.clientLeft | 0）

var viewport_top=（window.pageYOffset | document.documentElement.scrollTop）-（document.documentElement.clientTop | 0）

将元素的左/顶位置添加到视口的左/顶位置，即可获得真实位置
在IE8+中，即使在使用2D或3D CSS转换的元素上，这也可以正常工作。
很可能浏览器没有错误，这是实际位置，您可能没有检查正确的元素或类似的内容，但我们无法通过查看图像来判断？@adeneo我检查了所有父元素直到HTML的位置。它们都具有顶部位置
0px
，并且具有
位置：相对位置。您可以打开页面，自己在inspector中检查元素。您希望的位置是什么？我的浏览器告诉我，
#loginPage
在login.css中设置了
50%
。@ValentinWaeselynck我希望元素相对于文档左上角的实际位置。在屏幕截图中，元素的实际位置约为
0px
，但检查器和JavaScript返回
215px
。如果将窗口缩小，元素的实际位置将为负值（位于文档顶部边缘上方），但仍将返回正值。谢谢。知道如何通过JavaScript检索真实位置吗？