How to make one circle inside of another using CSS - 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>

Answer 2

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 3

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 4

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 5

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 6

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 7

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.

Answer 8

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

Answer 9

Here is an example of a circle with outer border.
HTML:
<div id="inner-circle"></div>
Styles:
#inner-circle {
background: #385a94;
border : 2px solid white;
border-radius: 50%;
height:30px;
width:30px;
position: relative;
box-shadow: 0 0 0 1px #cfd1d1;
}
See results:
JSFiddle

Answer 10

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 11

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 12

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 13

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 14

You can use the top and left property of CSS to center it.
body {
width: 100%
margin:0px;
text-align: center;
}
#content {
width: 500px;
margin-left: auto;
margin-right: auto;
}
#outer-circle {
background: #385a94;
border-radius: 50%;
height:200px;
width:200px;
}
#inner-circle {
position: relative;
background: #a9aaab;
border-radius: 50%;
height:100px;
width:100px;
top:50px;
left:50px;
}
<div id="content">
<h1>Test Circle</h1>
<div id="outer-circle">
<div id="inner-circle">
<span id="inside-content"></span>
</div>
</div>
</div>