【发布时间】：2017-01-10 22:30:11
【问题描述】：
我试图垂直对齐图片顶部的h1 标签。
我使用了position:relative 和top:50%，但我不明白为什么即使我使用了top:50%，它也没有垂直对齐。
所以这次我添加了transform: translateY(-50%);，由于某种原因它现在是垂直对齐的。
有人可以向我解释一下translateY(-50%) 是做什么的吗？
【问题讨论】：
【发布时间】：2017-01-10 22:30:11
【问题描述】：
首先你需要了解相对位置。根据 w3school “具有位置的元素：相对；相对于其正常位置定位。” 所以顶部，左侧等的百分比将不起作用。如果你给它 px 即 top:10px; 它将从当前位置获取位置。 以及关于 translateY() 的问题； 根据 w3school “翻译（）方法将元素从其当前位置移动” TraslateY() 将元素垂直向下移动，负值会将其移动到顶部的相反方向。 如需进一步阅读，您可以查看此链接http://www.w3schools.com/css/css3_2dtransforms.asp
【讨论】：