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

我要做的是使用背景代替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中，在加载CSS时隐藏div。

.loader{display:none;}

Answer 2

尝试

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

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

加载CSS时如何在屏幕中间设置微调器？

2 个答案: