Центр загрузки Css на всей странице

Question

Я хочу поместить загрузочный css прямо в центр моего экрана, и я хочу, чтобы он работал как на мобильном, так и на рабочем столе.В настоящее время мой CSS выглядит следующим образом:

.spinner {
  width: 100px;
  height: 100px;
  position:absolute;
  top: 50%;
  left: 50%;
  margin: 100px auto;
  z-index:99999;
}

.double-bounce1, .double-bounce2 {
  width: 100%;
  height: 100%;
  border-radius: 50%;
  background-color: #333;
  opacity: 0.3;
  position: absolute;
  top: 0;
  left: 0;
  z-index:99999;

  -webkit-animation: sk-bounce 2.0s infinite ease-in-out;
  animation: sk-bounce 2.0s infinite ease-in-out;
}

.double-bounce2 {
  -webkit-animation-delay: -1.0s;
  animation-delay: -1.0s;
  z-index:99999;
}

Это то, что у меня сейчас есть

Вы можете видеть, что оно не полностью центрировано, и я не знаю, какдостичь этого.Div spinner находится в моем application.html.erb внутри тега body над yield.

Как мне отцентрировать его в точном центре веб-страницы, включая sidenav и navbar?

Answer 1

Так что исправить было легко ... Я просто добавил приведенный ниже код в класс .spinner в CSS.

transform: translate(calc(-50%), calc(-50%));
position: fixed;

Единственная проблема, с которой у меня все еще есть проблема, заключается в том, что спиннер слишкоммного ниже.Я думаю, что изменение top: 50% на top: 40% может помочь.

Answer 2

Вы можете использовать ниже CSS внутри .spinner:

transform: translate(calc(-50%), calc(-50%));
position: fixed; /* if absolute doesn't work */
margin: 0; /* no need of margin */