在物化中居中预加载器答案

【问题标题】：centering preloader in materialize在物化中居中预加载器
【发布时间】：2016-11-04 09:52:14
【问题描述】：

鉴于此：

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

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

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.97.6/css/materialize.min.css">
<body>
  <div class="preloader-wrapper big active loader">
    <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>
  </div>
</body>

导致动画：-/

【问题讨论】：

标签： html css materialize

【解决方案1】：

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

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

【讨论】：

如果此答案技术上正确，您应该添加说明，说明您所做的更改以及更改的原因。就目前而言，此答案仅适用于这种特定情况，对未来的用户没有帮助。

【解决方案2】：

稍微改变了加载器的样式，有助于解决间歇性显示滚动条的问题

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

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

【讨论】：

【解决方案3】：

这对我有用

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%;
}

【讨论】：