如何现在将div的顶部与位置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对齐顶部，而不是居中对齐/居中对齐。我已经尝试对CSS进行4种不同的更改（参见图片）：

1. 将top: 50%更改为top: 0。结果：div的前50％不在屏幕上；
2. 删除所有变换，将top: 50%更改为top: 0。结果：div的50％不在右侧屏幕上；
3. 将top: 50%更改为top: 43%。结果：div对齐顶部；
4. 删除所有变换，将top: 50%更改为top: 43%。结果：75％的div消失在右下角。

3）工作很高兴。但是我不知道为什么43％是魔数。也许不是 完全 。我是通过反复试验，加载和重新加载而到达的。有更好的方法吗？

Answer 1

之所以这样工作，是因为您正在使用translateY属性更改对象的坐标。如果您删除所有translateY属性或将它们设置为0，例如：translateY (0);并添加top:0;，它将与窗口顶部对齐。

您可以在此处详细了解翻译的工作原理：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%);
    }