Как установить спиннер в середину экрана при загрузке с помощью CSS?

Question

Мой спиннер находится в середине экрана через секунду после загрузки страницы.Но в первом кадре страницы он не центрируется, а располагается в верхнем левом углу страницы.Как убедиться, что мой счетчик центрируется с самого начала?У меня нет проблем с центрированием загрузчика.Мне просто нужно убедиться, что мой счетчик запускается в середине страницы.Я уже искал похожие проблемы, но они не совпадают.Вот мой css.

.loader {
  /*left: 50%;
  position: fixed;
  top: 50%;
  transform: translate3d(-50%, -50%, 0);
  z-index: 999;*/
   position: fixed;
   z-index: 999;
   top: 0;
   left: 0;
   width: 100%;
   height: 100%;
   display: flex;
   justify-content: center;
   align-items: center;
}

html:

<div class="loader">
    <img src="../../../../assets/content/Amsa-loading.gif">

  </div>

Answer 1

Попробуйте

<div class="app_loader"></div>

.app_loader{
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}

Answer 2

Чтобы сделать эту работу, я использую фон вместо тега img:

.loader{
     height:100%;
     width:100%;
     background:url(/design/images/loader.gif) no-repeat center center;
     position:absolute;
     z-index:10;
}

, затем для HTML:

<div class="loader"></div>

, затем в CSS моего сайта скройтеdiv при загрузке CSS.

.loader{display:none;}