Как привязать веб-элемент к процентной высоте окна браузера?

Question

[Артур Кранц]

Уважаемые знатоки подскажите. Есть елемент веб, его нужно прикрепить ровно в центре видимой области браузера, то есть, нужно привязывать к процентам по высоте. Все браузеры разные, видимая область у них разная, а нам нужно чтобы элемент по высоте всегда во всех браузерах был по центру. Подскажите плиз

Answer 1

[Rustam Bainazarov]

Смените сложность вопроса на «лёгкую», это базовые свойства CSS.

Если нужно фиксировать на экране, то position: fixed + viewport-единицы (можно тупо в процентах в данном случае, ибо позиционируем относительно окна):


Если без фиксации при прокрутке и внутри любого блока, то тут уже обязательно viewport-единицы, чтобы не зависеть от обёртки и брать размеры прямо у окна браузера:


Учтите, что viewport-единицы в мобильных браузерах (Chrome Android и iOS Safari) со схлопываемыми (косое слово, да) панелями учитывают размер окна без учёта этих панелей в раскрытом состоянии, поэтому они могут перекрывать этот блок, пока не будут скрыты/сжаты.

Answer 2

[Dymok]

position: fixed;
left: 50%;
top: 50%;
transform: translate(-50%, -50%;