使用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：

position:relative; 
    top: 155px; 

：

 #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

你既然知道圆的大小，你可以只用它们定位

#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到内股利和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

对于黑色圆圈使用“位置：相对”，对于白色圆圈使用“位置：绝对”。

#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，并设置lefttop和至50％，而transform设置为translateX(-50%) translateY(-50%)。添加前缀以确保广泛的兼容性。它

#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

当你知道宽度和高度的#whitecircle，那么你可以将其设置在absolute位置，relative位置的父。然后给予#whitecirclelefttop 50％并减去其宽度高度的一半。

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>