Fatal编程技术网
  • html/
  • Html 使用“平移Y”进行垂直对齐

Html 使用“平移Y”进行垂直对齐

html css

Html 使用“平移Y”进行垂直对齐,html,css,Html,Css,我试图垂直对齐图片顶部的h1标记 我使用了position:relative和top:50%，我不明白为什么它没有垂直对齐，即使我使用了top:50% 所以这次我添加了transform:translateY（-50%）

我试图垂直对齐图片顶部的
h1
标记

我使用了
position:relative
和
top:50%
，我不明白为什么它没有垂直对齐，即使我使用了
top:50%

所以这次我添加了
transform:translateY（-50%）

有人能给我解释一下translateY（-50%）
做什么吗？

首先你需要了解相对位置。根据w3school“位置：相对的元素；相对于其正常位置定位。” 因此，顶部、左侧等的百分比将不起作用。如果你给它在像素即顶部：10px； 它将从当前位置获取位置。 还有你关于translateY（）的问题； 根据w3school，“translate（）方法将元素从其当前位置移动” TraslateY（）垂直向下移动元素，负值将使其相对于顶部移动。 要进一步阅读，您可以查看此链接

只需在此处阅读：