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

Question

本页http://orad.msbitsoftware.com/尝试垂直对齐登录表单。当我尝试通过 JavaScript 获得它的顶部位置时，我得到了错误的结果，这与 chrome 开发人员工具得到的结果相同(见附件截图)。

谁能解释一下导致这个问题的原因？为什么浏览器的原生工具也会受到影响？有没有办法通过 JavaScript 获取元素的正确位置？

谢谢。

Answer 1

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

顶部位置设置为50%，使元素的顶部位于父元素的中心(这个50%与父元素的高度有关)

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

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

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

更好的解释 here查看 -> vertically -> block level -> unknown height 部分