Элемент позиционируется top: 50%, что означает, что верхняя часть окна располагается на полпути вниз по видимой области окна («область просмотра») при загрузке страницы.
Это довольно стандартный бит CSS, который должен нормально работать в обоих браузерах.
Однако, поскольку позиция основана на размере видимого размера окна браузера, точная позиция будет отличаться в разных браузерах, даже если они оба развернуты на одном экране, так как оба браузера будут использовать различное количество пространство для их панелей инструментов и т. д., и, следовательно, их видовые окна браузера будут различаться по размеру.
Это наиболее вероятная причина того, что вы видите: оба браузера работают нормально; они просто следуют одной и той же инструкции по-разному, потому что их окна просмотра имеют разные размеры.
Вы также заметите тот же эффект, если измените размер окна браузера, и это также означает, что пользователи с разными разрешениями экрана будут видеть его по-разному, даже в одном браузере.
В этом эффекте нет ничего неправильного - если вы пытаетесь расположить что-то на 50%, то оно, естественно, будет в другом положении в зависимости от размера окна, в котором оно находится. Это может быть хорошей вещью, это означает, что вы можете убедиться, что он виден и центрирован для всех пользователей, независимо от размера их экрана.
Однако, если вы хотите предотвратить этот эффект, я бы предложил использовать фиксированное значение пикселя для стиля top, а не процент.
Если вы хотите разместить его absolute, но позиционировать относительно всей страницы, а не размера окна, то вам нужно создать элемент вне него (возможно, ваш body элемент) position:relative;. Затем он будет измерять абсолютную позицию вашего бокса относительно этого, а не против области просмотра.
Надеюсь, это поможет.