bootstrap center progressbar on div

Question

I'm trying to use a Bootstrap progress bar as a loading indicator, and I want the progress bar to be a certain width with the whole thing centered in the DIV. But the progress bar doesn't seem to like being centered.

When I do:

<div class="text-center">
    <img src="~/Content/Images/loading.gif" style="height:80px;" />
</div>

The image is centered properly. But when I substitute it for a progress bar, it goes to the left:

<div class="text-center">
    <div class="progress" style="width:200px;"> <!-- set to certain width -->
        <div class="progress-bar progress-bar-striped active" role="progressbar" style="width: 100%;">
            <span>
                Loading...
            </span>
        </div>
    </div>
</div>

Bootply Demo

I want the progress bar to display centered.

Answer 1

This bit of css worked for me.

.progress { margin-left: auto; margin-right:auto; }

Answer 2

Or, you can just use Bootstrap's center-block class

<div class="text-center">
  <div class="progress center-block" style="width:200px;"> <!-- set to certain width -->
    <div class="progress-bar progress-bar-striped active" role="progressbar" style="width: 100%;">
      <span>
        Loading...
      </span>
    </div>
  </div>
</div>

http://www.bootply.com/a0SXqv3g6N