使用CSS在圆圈内创建圆圈

Question

使用CSS我正在尝试绘制一个黑色圆圈，其中有一个白色圆圈。这是我的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>

但正如您所见（在Chrome和Firefox中），白色圆圈位于白色圆圈的顶部。我尝试了各种位置组合：绝对和位置：相对于没有正面效果。

Answer 1

您也可以使用职位，但最简单的方法是使用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

由于你知道圆圈的大小，你可以用它们来定位：

  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>

这是使用定位和边距的另一种方式。

#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

添加位置：相对;顶：150像素;到你在css的whitecircle

Answer 4

这是一个完美居中的工作示例：

#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

将position:absolute应用于内部div，将position:relative应用于外部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

使用＆＃34;职位：亲属＆＃34;对于黑圈和＆＃34;位置：绝对＆＃34;对于白色圆圈。

#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

这个中心元素的方法基于绝对位置，我们设置边距顶部是元素高度的一半，左边距是宽度的一半。

用

替换边距顶部，边距

transform: translate(-50%, -50%);

由于@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

您可以使用白色圆圈上的绝对定位，加上平移，使其完全居中，具体取决于黑色圆圈的大小。这样，您就可以自由地改变黑色圆圈的大小。

#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%);
}

希望这会有所帮助！

Answer 9

快速解决方案是将position设置为relative，并将left和top设置为50％，同时将transform设置为{{ 1}}。添加前缀以确保广泛的兼容性。

＆＃13;

＆＃13;

translateX(-50%) translateY(-50%)

＆＃13;

#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%);
}

＆＃13;

＆＃13;

＆＃13;

Answer 10

当您知道#whitecircle的宽度和高度时，您可以将其设置为absolute位置，并将relative位置设置为其父级。然后将#whitecircle left top 50％并减去其中一半的宽度。

top: calc(50% - (90px / 2)); 
left: calc(50% - (90px / 2));

＆＃13;

＆＃13;

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

＆＃13;

<div id="blackcircle">
  <div id="whitecircle"></div>
</div>

＆＃13;

＆＃13;

＆＃13;