Как выравнить элемент по вертикали?

Question

[Dvorak]

Написал функцию на jQuery для выравнивания по вертикали по центру. Всё работает, но при изменении размера окна браузера надпись съезжает. В чём ошибка?

function alignCenter(elem) {
  elem.css({
    left: ($(window).width() - elem.width()) / 2 + 'px',
    top: ($(window).height() - elem.height()) / 2 + 'px'
     })
  }

Comments

[Arman]

А простым css нельзя? только с js? Так вроде надо повешать событие на изменение окна и запускать функцию по новой

Answer 1

[DmitrySorokin]

Можно добавить функцию на событие изменения окна браузера. B внутри вызывать вашу функцию:
$( window ).resize(function() {
alignCenter();
});
Можно еще добавить небольшой таймаут на функцию, чтобы она не отрабатывала многократно при ресайзе, а с задержкой в 200 -300 милескунд. - будет меньше грузить браузер.

Но вообще, я бы посоветовал решить это с помощью css (нужно всегда стараться максимально использовать css+html для стилиации(ваш случай) и только в крайнем случае js).
Например, с использованием инлайн блоков и псевдоэлемента :
(источник https://css-tricks.com/centering-in-the-unknown/)

/* Родительский блок  */
.block {
  text-align: center;
  white-space: nowrap;
}
 
/* Псевдоэлемент, который занимает всю высоту родителя. Относительно его центра будет выравниваться позиция выравниваемого элемента */
.block:before {
  content: '';
  display: inline-block;
  height: 100%;
  vertical-align: middle;
  margin-right: -0.25em; /* Adjusts for spacing */
}

/* Выравниваемый элемент с неопределенной шириной и высотой */ 
.centered {
  display: inline-block;
  vertical-align: middle;
  width: 300px;
}

В той же статье можно найти и другие способы