在物質化

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