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

Question

此页面http://orad.msbitsoftware.com/尝试垂直对齐登录表单。当我试图通过JavaScript获得其最高位置时，我得到错误的结果，这与chrome开发人员工具获得的相同（参见附件截图）。

有人可以解释导致这个问题的原因吗？为什么浏览器的原生工具会受到影响？有没有办法通过JavaScript获得元素的正确位置？

感谢。

Answer 1

这是垂直居中未知高度元素的常用方法。

顶部位置设置为50％，这使得元素的顶部位于父级的中心（此50％与父级高度相关）

元素的垂直平移为50％。这与元素高度有关，并使元素垂直移动，直到它的中心位于父元素的中心

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

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

更好解释here看看 - ＆gt;垂直 - ＆gt;块级别 - ＆gt;未知身高部分

Answer 2

如果有人对如何通过Javascript检索元素的实际位置感兴趣：

1. 使用Element.getBoundingClientRect()在视口中获取元素的左/上位置。
2. 然后获取视口相对于文档的位置。如果你想支持旧版本的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);

1. 将元素的左/上位置添加到视口的左/上位置，即可获得真实位置。

这在IE8 +中运行得很好，甚至在使用2D或3D CSS变换的元素上也是如此。