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

Try,

 #inner-circle {
    position: absolute;
    background: #a9aaab;
    border-radius: 50%;
    height:300px;
    width:300px;
    margin: 15% 0px 0px 100px;
}

Here is ur Updated JSFIDDLE

Answer 2

Solved this by using CSS transform property:

You can refer to this JS fiddle link for below output: http://jsfiddle.net/suprabhasupi/74b1ptne/

div {
  border-radius: 50%;
  /* border: 1px solid red; */
}

.circle1 {
  position: relative;
  width: 300px;
  height: 300px;
  background-color: red;
}

.circle2 {
  transform: translate(25%, 25%);
  width: 200px;
  height: 200px;
  background-color: green;
}

.circle3 {
   transform: translate(48%, 46%);
  width: 100px;
  height: 100px;
  background-color: blue;
}

<div class="circle1">
  <div class="circle2">
    <div class="circle3">
    
    </div>
  </div>
</div>

Answer 3

Seems that top is the only thing you need to alter -> http://jsfiddle.net/972SF/12/

#inner-circle {
    position: relative;
    background: #a9aaab;
    border-radius: 50%;
    height:300px;
    width:300px;
    top: 100px; /* <--- */
    margin: 0px 0px 0px 100px;
}

Answer 4

try to give the innercircle a top:50% and than margin-top: a nagative value from the half of the height of the innercircle.

http://jsfiddle.net/972SF/19/

Answer 5

If you want to use only one div to add circle inside circle, then use box-shadow.

div {
  border-radius: 50%;
  box-shadow: 0px 0px 0px 10px red, 0px 0px 0px 20px green, 0px 0px 0px 30px yellow, 0px 0px 0px 40px pink;
  width: 100px;
  height:100px;
  margin: 3em;
}

<div></div>

Answer 6

Just use box-shadow to get the effect you want:

Demo in a fiddle: http://jsfiddle.net/972SF/16/

The html is reduced to:

<div id="content">
    <h1>Test Circle</h1>
    <div id="circle">
    </div>
</div>

Css:

#circle {
    margin: 10em auto;
    background: #385a94;
    border-radius: 50%;
    height:200px;
    width:200px;
    -webkit-box-shadow: 1px 1px 0px 100px black;
       -moz-box-shadow: 1px 1px 0px 100px black;
            box-shadow: 1px 1px 0px 100px black;
}

its simple, easy, and makes sure that your circles are always perfectly positioned next to each other.

You can change the size of the circle by changing the 4th property ( 100px ) on box-shadow to what ever you want.