CSS 堆叠 Div

Question

我有两个动画(在 CSS 中)div，它们围绕彼此旋转。我想在中间为文本添加另一个 div。但是，如果我将 div 放在这两个中的任何一个中，它就会与父 div 一起设置动画。如果我尝试定位它，它就位于两个圆圈之上。

HTML

<div id="ballWrapper">
    <div class="centerText"> 100</div>
    <div class="ball centerHorizontal centerVertical"></div>
    <div class="ball1 centerHorizontal centerVertical"></div>
</div>

CSS

centerText {
    position:absolute;
    left:0px;
    top:0px;
    margin-top:-500px;
    z-index:1;
}

图片> http://imgur.com/jPzUW6M

编辑 其余 CSS 代码(负边距只是我在试验，看看我是否可以让它向上或向下移动)

.ball {
    background-color: rgba(67,181,162,0.3);
    border: 5px solid rgba(67,181,162,0.9);
    opacity: .9;
    border-top: 5px solid rgba(0,0,0,0);
    border-left: 5px solid rgba(0,0,0,0);
    border-radius: 300px;
    box-shadow: 0 0 35px #43B5A2;
    width: 200px;
    height: 200px;
    margin: 0 auto;
    -moz-animation: spin 3.5s infinite linear;
    -webkit-animation: spin 3.5s infinite linear;
}

.ball1 {
    background-color: rgba(67,181,162,0.7);
    border: 5px solid rgba(67,181,162,0.9);
    opacity: .9;
    border-top: 5px solid rgba(0,0,0,0);
    border-left: 5px solid rgba(0,0,0,0);
    border-radius: 300px;
    box-shadow: 0 0 15px #43B5A2;
    width: 170px;
    height: 170px;
    margin: 0 auto;
    position: relative;
    top: -195px;
    -moz-animation: spinoff 3.5s infinite linear;
    -webkit-animation: spinoff 3.5s infinite linear;
}
.header {
    width:100%;
    position:absolute;
    margin-top:-200px;

}
.centered {
     display: block;
    margin-left: auto;
    margin-right: auto 
}
#ballWrapper {
    margin-top:200px;
    z-index:0;
    text-align:center;

}

.minusMargin{
margin-top:-100px;  
}

.centerText {
    position:absolute;
left:0px;
top:0px;
margin-top:-500px;
z-index:1;
}

Answer 1

删除 #ballWrapper 和 .centerText 的当前样式。像这样:

#ballWrapper {
   margin: 200px auto; 
   position: relative;
}

.centerText {
    line-height: 200px;
    position: absolute;
    text-align: center;
    width: 100%;
    z-index: 1;
}

Demo