How to make one circle inside of another using CSS

Question

I am trying to make one circle inside of another circle using css, but I am having an issue making it completely centered. I am close, but still not there. Any ideas?

<div id="content">
    <h1>Test Circle</h1>
    <div id="outer-circle">
        <div id="inner-circle">
            <span id="inside-content"></span>
        </div>
    </div>
</div>

Here is my CSS:

#outer-circle {
    background: #385a94;
    border-radius: 50%;
    height:500px;
    width:500px;
}
#inner-circle {
    position: relative;
    background: #a9aaab;
    border-radius: 50%;
    height:300px;
    width:300px;
    margin: 0px 0px 0px 100px;
}

Also, here is a fiddle: http://jsfiddle.net/972SF/

Answer 1

Ta da!

Explained in the CSS comments:

 #outer-circle {
   background: #385a94;
   border-radius: 50%;
   height: 500px;
   width: 500px;
   position: relative;
   /* 
    Child elements with absolute positioning will be 
    positioned relative to this div 
   */
 }
 #inner-circle {
   position: absolute;
   background: #a9aaab;
   border-radius: 50%;
   height: 300px;
   width: 300px;
   /*
    Put top edge and left edge in the center
   */
   top: 50%;
   left: 50%;
   margin: -150px 0px 0px -150px;
   /* 
    Offset the position correctly with
    minus half of the width and minus half of the height 
   */
 }

<div id="outer-circle">
  <div id="inner-circle">

  </div>
</div>