title: Make an image center on the page with bootstrap
body: <p>I am using the latest version of bootstrap and I am trying to get my image dead center on the page in a carousel. </p>
  
  <p>I placed the <code>container</code> class in the main div of the carousel but it is still off centered to the left of the page? </p>
  
  <p><img src="https://i.stack.imgur.com/m9Vs2.png" alt="Example of off centering of carousel"></p>
  
  <p>My code for the carousel is below: </p>
  
  <pre><code>&lt;!-- Main Carousel --&gt;
  &lt;div id="carousel-example-generic" class="carousel slide container" data-ride="carousel"&gt;
    &lt;div class="carousel-inner"&gt;
      &lt;div class="item active"&gt;
        &lt;img src="assets/img/carousel/slide01.jpg" alt="Ants climbing on grass"&gt;
        &lt;div class="carousel-caption"&gt;
          Ants climbing on grass
        &lt;/div&gt;
      &lt;/div&gt;
    &lt;/div&gt;
  &lt;/div&gt;
  &lt;!-- End Main Carousel --&gt;
  </code></pre>
  
  <p>From what I found on the internet is that the <code>container</code> class is supposed to center everything on the page. So what has happened here, and how can I fix it? </p>
  
  <p>I also tried wrapping the entire carousel around the following code, but the same result was achieved. </p>
  
  <pre><code>&lt;div class="container"&gt;
   &lt;!-- Carousel inside here --&gt;
  &lt;/div&gt;
  </code></pre>