实现中心预加载器

Question

实现中心预加载器

鉴于这种 :

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

Run Code Online (Sandbox Code Playgroud)

我想用这个预加载器position:fixed和中心.所以我做的是:

<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>

Run Code Online (Sandbox Code Playgroud)

导致动画: - /

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

Answer 1

Ron*_*sco 10

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

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

Run Code Online (Sandbox Code Playgroud)

如果这个答案是_technically_正确的,你应该添加一个关于你改变了什么以及它为什么起作用的描述.目前,这个答案只服务于这种特定情况,并没有帮助未来的用户. (3认同)

归档时间：	9 年前
查看次数：	5435 次
最近记录：	6 年，1 月前