如何将 top a div 现在与位置 top 50% 和 translateY(-50%) 对齐

Question

很久以前，我从 Josh Crozier 的 this answer 中复制并粘贴了方法 1，使 div 垂直和水平居中：

 .container {
        width:100%;
        position: absolute;
        top: 50%;
        left: 50%;
        -moz-transform: translateX(-50%) translateY(-50%);
        -webkit-transform: translateX(-50%) translateY(-50%);
        transform: translateX(-50%) translateY(-50%);
    }

结果见左下图。但现在我需要 div 来对齐顶部，而不是 center/middle。我尝试了对 css 的 4 种不同更改（见图）：

将 top: 50% 更改为 top: 0。结果：div 的前 50% 不在屏幕上；
删除所有变换，将top: 50%改为top: 0。结果：div 的 50% 在右边的屏幕外；
将 top: 50% 更改为 top: 43%。结果：div 顶部对齐；
删除所有变换，将top: 50%改为top: 43%。结果：div 的 75% 消失在右下方。

我很高兴 3) 成功了。但我不知道为什么 43% 是神奇的数字。也许 不完全是 。我通过反复试验，加载和重新加载到达了它。有更好的方法吗？

Answer 1

之所以如此，是因为您正在使用 translateY 属性更改对象的坐标。如果删除所有 translateY 属性或将它们设置为 0，如下所示：translateY (0); 并添加 top:0; 它将对齐到 window.

的顶部

您可以在此处详细了解翻译的工作原理：https://developer.mozilla.org/en-US/docs/Web/CSS/transform-function/translate

您的 css 应该是这样的：

.container {
        position: absolute;
        top: 0;
        left: 50%;
        -moz-transform: translateX(-50%);
        -webkit-transform: translateX(-50%);
        transform: translateX(-50%);
    }

如何将 top a div 现在与位置 top 50% 和 translateY(-50%) 对齐

How to align top a div now with position top 50% and translateY(-50%)

html

css

transition

position