title: bootstrap center progressbar on div
body: <p>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.</p>
  
  <p>When I do:</p>
  
  <pre><code>&lt;div class="text-center"&gt;
      &lt;img src="~/Content/Images/loading.gif" style="height:80px;" /&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>The image is centered properly. But when I substitute it for a progress bar, it goes to the left:</p>
  
  <pre><code>&lt;div class="text-center"&gt;
      &lt;div class="progress" style="width:200px;"&gt; &lt;!-- set to certain width --&gt;
          &lt;div class="progress-bar progress-bar-striped active" role="progressbar" style="width: 100%;"&gt;
              &lt;span&gt;
                  Loading...
              &lt;/span&gt;
          &lt;/div&gt;
      &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p><a href="http://www.bootply.com/X6RpGdvJbA" rel="nofollow">Bootply Demo</a></p>
  
  <p>I want the progress bar to display centered.</p>