Centering a text in div not working - html

Question

Hi I'm trying to center the text in the first circle div. I think it's currently in the center of the div but when there is more than one characters like '200', it looks funky as below. I have the red circle background and trying to make the text in the center regardless of the characters. thank you in advance!
.main {
vertical-align: top;
margin-top: 3px;
margin-bottom: 5px;
display: inline-block;}
.main .label {
display: inline-block;}
.bg {
background: red;
padding: 10px;
font-weight: bold;
color: #fff;
display: inline-block;
border-radius: 60%;}
.bg .label {
vertical-align: top;
margin-top: 3px;
margin-bottom: 5px;
width: 10px;
display: inline-block;
margin: auto;}
<div class="main">
<div class="bg"><span class="label">200</span></div>
<span class="label">This is the other text need to be</span>
<div class="bg"><span class="label">0</span></div>
<span class="label">This is the other text need to be</span>
</div>

Answer 1

Try to set width:100% on .bg .label as follows:
.main {
vertical-align: top;
margin-top: 3px;
margin-bottom: 5px;
display: inline-block;}
.main .label {
display: inline-block;}
.bg {
background: red;
padding: 10px;
font-weight: bold;
color: #fff;
display: inline-block;
border-radius: 60%;}
.bg .label {
vertical-align: top;
margin-top: 3px;
margin-bottom: 5px;
width: 100%;
display: inline-block;
margin: auto;}
<div class="main">
<div class="bg"><span class="label">200</span></div>
<div class="bg"><span class="label">0</span></div>
</div>
EDIT: if you want to keep the same width for the circle and still center the text, you could replace width:10px; in .bg with the following:
.bg {
/* ... */
width: 35px;
padding: 10px 0;
text-align: center;
/* ... */
}
So the full snippet would look something like this:
.main {
vertical-align: top;
margin-top: 3px;
margin-bottom: 5px;
display: inline-block;}
.main .label {
display: inline-block;}
.bg {
background: red;
width: 35px;
padding: 10px 0;
text-align: center;
font-weight: bold;
color: #fff;
display: inline-block;
border-radius: 60%;}
.bg .label {
vertical-align: top;
margin-top: 3px;
margin-bottom: 5px;
width: 100%;
display: inline-block;
margin: auto;}
<div class="main">
<div class="bg"><span class="label">200</span></div>
<div class="bg"><span class="label">0</span></div>
</div>

Answer 2

Try something like this. I'm guessing you are ok with fixing the width and height of your little circles? If so, this solution should work for you. The benefit here is your circles stay consistent visually regardless of the values placed within them.
You can adjust the width/height of the circle to your liking, and whatever value you place in there will remain centered. Keep in mind, with this solution, your circles won't scale to match the value's length should it expand beyond their bounds. I assume this is the behavior you're looking for, though, given your original code.
Also, note, you might need to adjust the top margin to position the values according to the height of the circles if you change them. Hope this helps!
.bg {
background: red;
font-weight: bold;
color: #fff;
display: inline-block;
border-radius: 60%;
width: 38px;
height: 38px;
}
.bg .label {
display: inline-block;
margin: 9px auto 0;
text-align: center;
width: 38px;
}
<div class="main">
<div class="bg"><span class="label">200</span></div>
<span class="label">This is the other text need to be</span>
<div class="bg"><span class="label">0</span></div>
<span class="label">This is the other text need to be</span>
</div>