How to center a inner circle using css - html

Question

div.container{
border:1px solid red;
position:relative;
}
span.parent{
display:inline-block;
width:30px;
height:30px;
border:1px solid gray;
border-radius:50%;
text-align: center;
position:absolute;
right:20px;
top:10px;
}
span.child{
background:green;
width:80%;
height:80%;
display:inline-block;
border-radius:50%;
left:10%;
top:10%;
position:relative;
}
<div class="container">
<p>some info goes here</p>
<span class="parent"><span class="child"></span></span>
</div>
I am trying to create a filled circle with border, but getting not the fill properly centered. how to fix this?

Answer 1

Another way to do this is by using Flexbox.
If you add the following to your parent:
display: flex;
align-items: center;
justify-content: center;
And remove the relative positioning from the child element, the child element will be centered inside the parent.
div.container{
border:1px solid red;
position:relative;
}
span.parent{
display: flex;
align-items: center;
justify-content: center;
width:30px;
height:30px;
border:1px solid gray;
border-radius:50%;
text-align: center;
position:absolute;
right:20px;
top:10px;
}
span.child{
background:green;
width:80%;
height:80%;
display:inline-block;
border-radius:50%;
}
<div class="container">
<p>some info goes here</p>
<span class="parent"><span class="child"></span></span>
</div>
Edit: If you encounter a problem with flexbox circles being squashed on smaller resolutions, try using min-height and min-width, and using margin: auto for centering instead of display: flex.

Answer 2

Give left:0; to span.child class.
div.container{
border:1px solid red;
position:relative;
}
span.parent{
display:inline-block;
width:30px;
height:30px;
border:1px solid gray;
border-radius:50%;
text-align: center;
position:absolute;
right:20px;
top:10px;
}
span.child{
background:green;
width:80%;
height:80%;
display:inline-block;
border-radius:50%;
left:0;
top:10%;
position:relative;
}
<div class="container">
<p>some info goes here</p>
<span class="parent"><span class="child"></span></span>
</div>

Answer 3

Just Change the position to position:absolute in place of position:relative for child span span.child.
div.container{
border:1px solid red;
position:relative;
}
span.parent{
display:inline-block;
width:30px;
height:30px;
border:1px solid gray;
border-radius:50%;
text-align: center;
position:absolute;
right:20px;
top:10px;
}
span.child{
background:green;
width:80%;
height:80%;
display:inline-block;
border-radius:50%;
left:10%;
top:10%;
align:center;
position:absolute;
}
<div class="container">
<p>some info goes here</p>
<span class="parent"><span class="child"></span></span>
</div>

Answer 4

You can use position: absolute in child instead to center it
span.child{
background:green;
width:80%;
height:80%;
display:inline-block;
border-radius:50%;
position:absolute;
left:50%;
top:50%;
transform: translate(-50%, -50%);
}
I also changed the value of left and top, and added transform:translate() to make sure it is always centered regardless of browser size
div.container {
border: 1px solid red;
position: relative;
}
span.parent {
display: inline-block;
width: 30px;
height: 30px;
border: 1px solid gray;
border-radius: 50%;
text-align: center;
position: absolute;
right: 20px;
top: 10px;
}
span.child {
background: green;
width: 80%;
height: 80%;
display: inline-block;
border-radius: 50%;
position: absolute;
left: 50%;
top: 50%;
transform: translate(-50%, -50%);
}
<div class="container">
<p>some info goes here</p>
<span class="parent"><span class="child"></span></span>
</div>

Answer 5

Just Changed the position:relative to position:absolute of span.child
div.container{
border:1px solid red;
position:relative;
}
span.parent{
display:inline-block;
width:30px;
height:30px;
border:1px solid gray;
border-radius:50%;
text-align: center;
position:absolute;
right:20px;
top:10px;
}
span.child{
background:green;
width:80%;
height:80%;
display:inline-block;
border-radius:50%;
left:10%;
top:10%;
position:absolute;
}
<div class="container">
<p>some info goes here</p>
<span class="parent"><span class="child"></span></span>
</div>