我可以看到此代码用于在其父元素内垂直对齐 div:
.element {
position: relative;
top: 50%;
transform: translateY(-50%);
}
问题是为什么?我的第一个想法是父元素包含的不仅仅是视口。我使我的父视口高度等于 100vh
和宽度 100%
。那没有用。我仍然需要翻译或负边距抵消。当父元素设置为 margin: 0;
时,为什么我需要负偏移量?是因为我没有考虑计算出的保证金吗?
原文由 ltrainpr 发布,翻译遵循 CC BY-SA 4.0 许可协议
顶部:0 (默认)
默认情况下,您的元素位于页面顶部,元素顶部为 0:
顶部:50%
当您将它向下移动 50% 高度(整个页面的 50%)时,元素的顶部位于 50% 标记处,这意味着该元素从 50% 开始并且不居中。
顶部:50%;变换:翻译Y(-50%);
当元素的顶部位于中间标记处时,我们可以将元素向上移动其自身高度的一半,使其在整个页面中居中。这正是
transform:translateY(-50%);
所做的:但为什么我们不能直接说
top: 25%
或类似的东西?我制作了一个简短的片段来向您展示该实现的不同之处: