Centralized a circle border

Question

I have below coding which I'm trying to put a number in a circle, a glyphicon and label below. The glyphicon and the label had align center already, but I still can't get the circle and the number to align center. Any idea how to do it guys?

html:

<div id="ttlwait" class="col-xs-3">
    <div id="circlePos" class="col-xs-12">
        <div id="waitnum" class="numberCircle" style="text-align:center;">0</div>
        <div style="text-align:center;">
            <span id="gly-user1" class="glyphicon glyphicon-user" style="color:red;"></span>
        </div>
        <p id="gly-userw" style="text-align:center;">People</p>
</div>

css:

#ttlwait{
    background-color:yellow;
}
.numberCircle{
    font-size:8vmin;
    color:red;
    border: 2px solid red;
    border-radius: 50%; 
    height:12vmin; 
    width:12vmin;
}

JSFIDDLE

Answer 1

Just add display:inline-block to the .numberCircle, and center all items inside the container.

CSS

.numberCircle {
    font-size:8vmin;
    color:red;
    border: 2px solid red;
    border-radius: 50%;
    height:12vmin;
    width:12vmin;
    display: inline-block;
}

HTML

<div id="ttlwait" class="col-xs-3">
    <div id="circlePos" class="col-xs-12 text-center">
        <div id="waitnum" class="numberCircle" style="text-align:center;">0</div>
        <div style="text-align:center;"> <span id="gly-user1" class="glyphicon glyphicon-user" style="color:red;"></span>

        </div>
        <p id="gly-userw" style="text-align:center;">People</p>
    </div>

Don´t forget to center all elements inside the container, you can achieve this by setting .text-center class, or use text-align: center

DEMO HERE