Как выровнять top div сейчас с позицией top 50% и translateY (-50%)

Question

Много лет назад я скопировал и вставил подход 1 из этого ответа Джоша Крозье , чтобы центрировать деление по вертикали и горизонтали:

 .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 для выравнивания top, а не center / middle. Я пробовал 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%);
    }