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?

<

Answer 1

See How I have positioned the Divs, Just border-radius should do the Job

.outer{width:500px;height:500px;background:#f00;border-radius:50%;position:relative;top:0;left:100;}
.inner{width:250px;height:250px;background:#000;border-radius:50%;position:absolute;top:125;left:125;}



   <div class="outer">

      <div class="inner">


      </div>

    </div>

DEMO

Answer 2

Use position: relative on the outer circle, position:absolute on the inner circle, and set all offset to the same value. Let the automatic calculation of height and width handle the rest (JSFiddle):

#outer-circle {
    position:relative;
    background: #385a94;
    border-radius: 50%;
    height:500px;
    width:500px;
}
#inner-circle { 
    position:absolute;
    background: #a9aaab;
    border-radius: 50%;
    right: 100px;
    left: 100px;
    top: 100px;
    bottom: 100px;
    /* no margin, no width, they get automatically calculated*/
}

Answer 3

You don't need extra elements in CSS3

You can do it all with one element and a box-shadow.

JSFiddle Demo.

CSS

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

Answer 4

SOLVED! Exactly the way you want:

DEMO: http://jsfiddle.net/aniruddha153/RLWua/

HTML:

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

CSS:

#content {
   position: relative;
   width: 100%;
   padding-bottom: 100%;
}

#outer-circle {
   position: absolute;
   width: 50%;
   height: 50%;
   background-color: #000000;
   border-radius: 50%;
}

#inner-circle{
  margin-top: 25%;
  margin-left: 25%;
  position: absolute;
  width: 50%;
  height: 50%;
  background-color: #e5e5e5;
  border-radius: 50%;
}

Answer 5

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>

Answer 6

take a look at this fiddle

which calculates centering automatically

#outer-circle {
    background: #385a94;
    border-radius: 50%;
    height:500px;
    width:500px;
    display:table-cell;
    vertical-align:middle;
}
#inner-circle {
    display:inline-block;
    background: #a9aaab;
    border-radius: 50%;
    height:300px;
    width:300px;
}