CSS Stacking Divs

Question

I have two animated (in CSS) divs they rotate around each other. I want to add another div for text in the middle. However if I put the div inside any of these two it animates with the parent div. If i try to position it it just sits above the two circles.

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

Image > http://imgur.com/jPzUW6M

EDIT Rest of CSS code (the negative margin was just me experimenting to see if i could get it too move up or down)

.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

Remove the current styles for #ballWrapper and .centerText. Like this:

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

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

Demo

Answer 2

http://jsfiddle.net/3J8yt/

HTML

<div id="ballWrapper">

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

CSS

.centerText {
    position:absolute;
left:50%;
top:50%;
z-index:1;
}

This gets you pretty close to what you want. Adjust %'s accordingly.

Answer 3

Since child element inherit CSS from their parents, you need to "clear" those values. For the animation sequence, the value for the .centerText class would read "none". And you need to use "relative" positioning, not "absolute".