Progress bar circle not center in bootstrap - html

Question

Im try to center in webpage this Progress bar circle but i cant do it , how can i center , please help me to fix that issue , ,im try to put that text-center but not work for me, please look at this image you can understand that issue,
thanks
/jsfiddle
html
<div class="content-wrap">
<div>
<div class="progress-bar position text-center" data-percent="48" data-duration="1000" data-color="#6a6f77,#5fb756"><script>$(".progress-bar").loading()</script></div>
</div>
</div>
css
/* Progress Bar */
.progress-bar {
text-align: center;
height: 150px;
width: 150px;
margin-left: 55px;
margin-top: 65px;
}
.progress-bar {
float: left;
width: 0;
height: 100%;
font-size: 12px;
line-height: 20px;
color: #fff;
text-align: center;
-webkit-box-shadow: inset 0 -1px 0 rgba(0, 0, 0, .15);
box-shadow: inset 0 -1px 0 rgba(0, 0, 0, .15);
-webkit-transition: width .6s ease;
-o-transition: width .6s ease;
transition: width .6s ease;
}
.progress-bar div {
position: absolute;
height: 200px;
width: 200px;
border-radius: 50%;
}
.progress-bar div span {
position: absolute;
font-family: sans-serif;
font-size: 60px;
line-height: 175px;
height: 175px;
width: 175px;
left: 12.5px;
top: 13.5px;
text-align: center;
border-radius: 50%;
background-color: #ffffff;
color: black;
}
.progress-bar .background {
background-color: #b3cef6;
}
.progress-bar .rotate {
clip: rect(0 100px 200px 0);
background-color: #4b86db;
}
.progress-bar .left {
clip: rect(0 100px 200px 0);
opacity: 1;
background-color: #b3cef6;
}
.progress-bar .right {
clip: rect(0 100px 200px 0);
transform: rotate(180deg);
opacity: 0;
background-color: #4b86db;
}
#keyframes toggle {
0% {
opacity: 0;
}
100% {
opacity: 1;
}
}
/*End of Progress Bar*/

Answer 1

Try this: Just add style:"text-align:center" in div, below the content-wrap div

Answer 2

.progress-bar {
text-align: center;
height: 150px;
width: 150px;
/* margin-left: 55px;*/
margin-left: calc(100%/2 - 100px);
margin-top: 65px;
}

Answer 3

try this
.progress-bar{
float: none;
display: block;
margin: 0 auto;
}
If you are using multiple progress bar, then try this
.progress-bar{
float: none;
display: inline-block;
margin: 0 auto;
}
.on-parent-element{
text-align: center
}
UPDATE-
here is working fiddle - https://jsfiddle.net/thesumit67/6jz40dfa/6/
You should add proper width on progress bar element, and remove float use inline-block instead.
In your fiddle you made two mistakes.
add jQuery before progress bar plugin.
use HTTPS to load external resources. ( check in your console )