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

Question

[Хороший Человек]

Добрый день.
Есть страничка, на ней справа есть блок с "фильтрами", при нажатии на чекбокс/выборе значения select/ написании цифр в поле ввода - срабатывает событие(change) и появляется лоадер слева от блока с фильтром (получается поверх блока с контентом). Как мне сделать так, что бы появлялся лоадер четко по центру страницы, не зависимо от того на сколько страница проскроллена?

Answer 1

[DTX]

position: fixed;

https://jsfiddle.net/10b45t1u/

Чтобы было строго по центру можно добавить маргины, например.
https://jsfiddle.net/10b45t1u/1/

Answer 2

[devstudent]

.loader {
  position: fixed;
  top:50%;
  left: 50%;
  width: 200px;
  height: 200px;
  margin-top: -100px;
  margin-left: -100px;
}

Answer 3

[Андрей Федоров]

codepen.io/aliencash/pen/ZWVWOJ
Только не забудьте про reset.css и autoprefixer

Comments

[DTX]

Думаю, не стоит использовать флекс, когда можно обойтись без него..

[Андрей Федоров]

DTX: Варианты отмеченные как решения имеют существенный недостаток - нужно знать размеры блока, который центруете. В случае с flex в этом нет необходимости.

[Хороший Человек]

DTX: Андрей Федоров: Flex уже имеет неплохую поддержку, но размеры центрируемого мною блока четко заданы))
Спасибо за ответы.