如何将顶部div与位置前50％和translateY（-50％）对齐

Question

在几年前，我复制并粘贴了来自this answer的Josh Crozier的方法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来对齐顶部，而不是中心/中间。我已经尝试了4种不同的css更改（见图）：

1. 将top: 50%改为top: 0。结果：前50％的div不在屏幕上;
2. 删除所有变换，将top: 50%更改为top: 0。结果：50％的div在屏幕右侧;
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%);
    }