Using CSS create circle within a circle - html

Question

Using CSS I'm trying to draw a black circle with a white circle centered within it. This is my HTML/CSS:
#blackcircle {
background-color: black;
color: white;
width: 400px;
height: 400px;
border-radius: 50%;
margin: 0 auto;
}
#whitecircle {
background-color: white;
color: black;
width: 90px;
height: 90px;
border-radius: 50%;
margin: 0 auto;
}
<div id="blackcircle">
<div id="whitecircle"></div>
</div>
BUT as you can see (in Chrome and Firefox), the white circle is centered at the top of the white circle. I've tried various combinations of position:absolute and position:relative to no positive effect.

Answer 1

You can do with positions too, but easiest way is with flexbox:
#blackcircle {
background-color:black;
color:white;
width: 400px;
height: 400px;
border-radius:50%;
text-align:center;
margin: 0 auto;
display: flex;
align-items: center;
}
#whitecircle {
background-color: white;
color: black;
width: 90px;
height: 90px;
border-radius:50%;
margin: 0 auto;
}
<div id="blackcircle">
<div id="whitecircle"></div>
</div>

Answer 2

Since you know the sizes of the circles you can just position them with:
position:relative;
top: 155px;
#blackcircle {
background-color: black;
color: white;
width: 400px;
height: 400px;
border-radius: 50%;
margin: 0 auto;
}
#whitecircle {
background-color: white;
color: black;
width: 90px;
height: 90px;
border-radius: 50%;
margin: 0 auto;
position:relative;
top: 155px;
}
<div id="blackcircle">
<div id="whitecircle"></div>
</div>
Here's another way using positioning and margins.
#blackcircle {
background-color: black;
color: white;
width: 400px;
height: 400px;
border-radius: 50%;
margin: 0 auto;
position:relative;
}
#whitecircle {
background-color: white;
color: black;
width: 90px;
height: 90px;
border-radius: 50%;
position:absolute;
margin:auto;
top:0;
right:0;
bottom:0;
left:0;
}
<div id="blackcircle">
<div id="whitecircle"></div>
</div>

Answer 3

Add position:relative; top:150px; to your whitecircle in css

Answer 4

Here is a working example, perfectly centered:
#blackcircle {
background-color: black;
color: white;
width: 400px;
height: 400px;
border-radius: 50%;
margin: 0 auto;
position:relative;
}
#whitecircle {
background-color: white;
color: black;
width: 90px;
height: 90px;
border-radius: 50%;
margin: 0 auto;
position:absolute;
top:50%;
left:50%;
margin-top:-45px; /* half the height */
margin-left:-45px; /* half the width */
}
https://jsfiddle.net/zoxb3j3j/

Answer 5

Applying position:absolute to inner div and position:relative to the outer div.
HTML:
<div id="blackcircle">
<div id="whitecircle"></div>
</div>
CSS:
#blackcircle {
background-color:black;
color:white;
width: 400px;
height: 400px;
border-radius:50%;
margin: 0 auto;
position: relative;
}
#whitecircle {
background-color: white;
color: black;
width: 100px;
height: 100px;
border-radius:50%;
top:150px;
left:150px;
position:absolute;
}
Fiddle.

Answer 6

Use "position:relative" for the black circle and "position:absolute" for the white circle.
#blackcircle {
background-color: black;
color: white;
width: 400px;
height: 400px;
border-radius: 50%;
margin: 0 auto;
position: relative;
}
#whitecircle {
background-color: white;
color: black;
width: 90px;
height: 90px;
border-radius: 50%;
position: absolute;
left: 40%;
top: 40%;
}

Answer 7

This method of center element base by the position absolute and we set margin top is half of the height of the element and margin left will be half of the width .
replace the margin top , margin left with
transform: translate(-50%, -50%);
will make it dynamic thanks to #Magnus Buvarp
#blackcircle {
background-color: black;
color: white;
width: 400px;
height: 400px;
border-radius: 50%;
margin: 0 auto;
position: relative;
}
#whitecircle {
background-color: white;
color: black;
width: 90px;
height: 90px;
border-radius: 50%;
margin: 0 auto;
position: absolute;
top: 50%;
left: 50%;
margin-top: -40px;
margin-left: -40px;
}
<div id="blackcircle">
<div id="whitecircle"></div>
</div>

Answer 8

You can use the absolute positioning on the white circle, plus a translation to make it fully centered depending on the size of the black circle. That way, you can freely change the size of the black circle.
#blackcircle {
background-color: black;
color: white;
width: 400px;
height: 400px;
border-radius: 50%;
margin: 0 auto;
position: relative;
}
#whitecircle {
background-color: white;
color: black;
width: 90px;
height: 90px;
border-radius: 50%;
margin: 0 auto;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
-webkit-transform: translate(-50%, -50%);
-ms-transform: translate(-50%, -50%);
}
Hope this will help!

Answer 9

A quick solution would be to set position to relative, and set left and top to 50%, while setting the transform to translateX(-50%) translateY(-50%). Add prefixes to ensure wide compatibility.
#blackcircle {
background-color: black;
color: white;
width: 400px;
height: 400px;
border-radius: 50%;
margin: 0 auto;
}
#whitecircle {
background-color: white;
color: black;
width: 90px;
height: 90px;
border-radius: 50%;
position: relative;
top: 50%;
left: 50%;
-webkit-transform: translateX(-50%) translateY(-50%);
-ms-transform: translateX(-50%) translateY(-50%);
transform: translateX(-50%) translateY(-50%);
}
<div id="blackcircle">
<div id="whitecircle"></div>
</div>

Answer 10

While you know the width and height of #whitecircle then you can set it in absolute position, and relative position for it's parent. then give to #whitecircle left top 50% and subtract half of it's width height.
top: calc(50% - (90px / 2));
left: calc(50% - (90px / 2));
#blackcircle {
background-color: black;
color: white;
width: 400px;
height: 400px;
border-radius: 50%;
margin: 0 auto;
position: relative
}
#whitecircle {
background-color: white;
color: black;
width: 90px;
height: 90px;
border-radius: 50%;
margin: 0 auto;
position: absolute;
top:calc(50% - (90px / 2));
left:calc(50% - (90px / 2));
margin: 0 auto;
}
<div id="blackcircle">
<div id="whitecircle"></div>
</div>

Answer 11

You can create 3 divs with 2 css class for circle.
Here the css code for example:
.circlecenter {
margin:auto auto;
text-align:center;
}
.circle1 {
padding:10px;
border-radius:10000px;
width:200px;
height:200px;
background:#000;
}
.circle2 {
padding:10px;
border-radius:10000px;
width:50px;
height:50pxM;
background:#fff;
}
And then the div:
<div class="circlecenter"><div class="circle1"><div class="circle2"></div></div></div>