Using CSS create circle within a circle

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>