如何使这个css加载器居中并自动调整大小？

Question

我是css的新手，我不知道如何居中并让它自动调整大小，我想知道你们是否可以帮助一个gal，无论如何这里是css loader：

https://jsfiddle.net/4Ljayw2f

<div id="squaresWaveG">
<div id="squaresWaveG_1" class="squaresWaveG">
</div>
<div id="squaresWaveG_2" class="squaresWaveG">
</div>
<div id="squaresWaveG_3" class="squaresWaveG">
</div>
<div id="squaresWaveG_4" class="squaresWaveG">
</div>
<div id="squaresWaveG_5" class="squaresWaveG">
</div>
<div id="squaresWaveG_6" class="squaresWaveG">
</div>
<div id="squaresWaveG_7" class="squaresWaveG">
</div>
<div id="squaresWaveG_8" class="squaresWaveG">
</div>
</div>

#squaresWaveG{
position:relative;
width:240px;
height:29px}

.squaresWaveG{
position:absolute;
top:0;
background-color:#000000;
width:29px;
height:29px;
-moz-animation-name:bounce_squaresWaveG;
-moz-animation-duration:3.3s;
-moz-animation-iteration-count:infinite;
-moz-animation-direction:linear;
-webkit-animation-name:bounce_squaresWaveG;
-webkit-animation-duration:3.3s;
-webkit-animation-iteration-count:infinite;
-webkit-animation-direction:linear;
-ms-animation-name:bounce_squaresWaveG;
-ms-animation-duration:3.3s;
-ms-animation-iteration-count:infinite;
-ms-animation-direction:linear;
-o-animation-name:bounce_squaresWaveG;
-o-animation-duration:3.3s;
-o-animation-iteration-count:infinite;
-o-animation-direction:linear;
animation-name:bounce_squaresWaveG;
animation-duration:3.3s;
animation-iteration-count:infinite;
animation-direction:linear;
}

#squaresWaveG_1{
left:0;
-moz-animation-delay:1.32s;
-webkit-animation-delay:1.32s;
-ms-animation-delay:1.32s;
-o-animation-delay:1.32s;
animation-delay:1.32s;
}

#squaresWaveG_2{
left:30px;
-moz-animation-delay:1.65s;
-webkit-animation-delay:1.65s;
-ms-animation-delay:1.65s;
-o-animation-delay:1.65s;
animation-delay:1.65s;
}

#squaresWaveG_3{
left:60px;
-moz-animation-delay:1.98s;
-webkit-animation-delay:1.98s;
-ms-animation-delay:1.98s;
-o-animation-delay:1.98s;
animation-delay:1.98s;
}

#squaresWaveG_4{
left:90px;
-moz-animation-delay:2.31s;
-webkit-animation-delay:2.31s;
-ms-animation-delay:2.31s;
-o-animation-delay:2.31s;
animation-delay:2.31s;
}

#squaresWaveG_5{
left:120px;
-moz-animation-delay:2.64s;
-webkit-animation-delay:2.64s;
-ms-animation-delay:2.64s;
-o-animation-delay:2.64s;
animation-delay:2.64s;
}

#squaresWaveG_6{
left:150px;
-moz-animation-delay:2.97s;
-webkit-animation-delay:2.97s;
-ms-animation-delay:2.97s;
-o-animation-delay:2.97s;
animation-delay:2.97s;
}

#squaresWaveG_7{
left:180px;
-moz-animation-delay:3.3s;
-webkit-animation-delay:3.3s;
-ms-animation-delay:3.3s;
-o-animation-delay:3.3s;
animation-delay:3.3s;
}

#squaresWaveG_8{
left:210px;
-moz-animation-delay:3.63s;
-webkit-animation-delay:3.63s;
-ms-animation-delay:3.63s;
-o-animation-delay:3.63s;
animation-delay:3.63s;
}

@-moz-keyframes bounce_squaresWaveG{
0%{
background-color:#000000;
}

100%{
background-color:#FFFFFF;
}

}

@-webkit-keyframes bounce_squaresWaveG{
0%{
background-color:#000000;
}

100%{
background-color:#FFFFFF;
}

}

@-ms-keyframes bounce_squaresWaveG{
0%{
background-color:#000000;
}

100%{
background-color:#FFFFFF;
}

}

@-o-keyframes bounce_squaresWaveG{
0%{
background-color:#000000;
}

100%{
background-color:#FFFFFF;
}

}

@keyframes bounce_squaresWaveG{
0%{
background-color:#000000;
}

100%{
background-color:#FFFFFF;
}

}

很抱歉，如果我为jsfiddle thingy

做了错误的代码

Answer 1

要将元素居中，只需将margin:0添加到#squaresWaveG

即可

#squaresWaveG{
position:relative;
width:240px;
height:29px;
margin:0 auto;
}

这里是jsfiddle