在物质化

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和centered.So我所做的是：

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