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