Question

鉴于此：

   <div class="preloader-wrapper big active">
    <div class="spinner-layer spinner-blue-only">
     <div class="circle-clipper left">
       <div class="circle"></div>
     </div>
     <div class="gap-patch">
       <div class="circle"></div>
     </div>
     <div class="circle-clipper right">
      <div class="circle"></div>
  </div>
</div>

我想将此预加载器与position:fixed一起使用并居中。所以我做的是：

top:50%;
left:50%;
position:fixed;
-webkit-transform:translate(-50%,-50%);

导致动画： - /

http://jsfiddle.net/kqjy7jbb/6/

Answer 1

只要您的容器具有声明的宽度和高度，这将使元素水平和垂直居中。 JSfiddle

.loader {
position: absolute;
top :0;
left: 0;
right: 0;
bottom: 0;
margin: auto;
}

Answer 2

这对我有用

index.html

<div class="loader">
      <div class="preloader-wrapper small active">
        <div class="spinner-layer spinner-green-only">
          <div class="circle-clipper left">
            <div class="circle"></div>
          </div>
          <div class="gap-patch">
            <div class="circle"></div>
          </div>
          <div class="circle-clipper right">
            <div class="circle"></div>
          </div>
        </div>
     </div>
</div>

style.css

.loader {
  position: absolute;
  bottom: 50%;
  right: 50%;
}

Answer 3

稍微更改了加载程序的样式，这有助于消除间歇性显示滚动条的问题

<div className="preloader-wrapper big active loader">
    // spinners
</div>

.loader {
  position: absolute;
  margin: auto;
  top: 50vh;
  bottom: 50vh;
  left: 0;
  right: 0;
}

实现中心预加载器

3 个答案: