title: Center Image Vertically and Horizontally in Bootstrap Grid
body: <p>I'm having trouble figuring out how to center an image vertically and horizontally. Essentially I have two rows of images, all have a width of 150 but heights vary.</p>
  
  <p>CSS</p>
  
  <pre><code>.image-center {
    display: inline-block;
    vertical-align: middle;
    position: relative;
  }
  </code></pre>
  
  <p>HTML</p>
  
  <pre><code>&lt;div class="row"&gt;
          &lt;div class="col"&gt;
              &lt;img class="center-block image-center" width="150" src="imagery/1.png"/&gt;
          &lt;/div&gt;
          &lt;div class="col"&gt;
              &lt;img class="center-block image-center" width="150" src="imagery/2.png"/&gt;
          &lt;/div&gt;            &lt;div class="col"&gt;
              &lt;img class="center-block image-center" width="150" src="imagery/3.png"/&gt;
          &lt;/div&gt;            &lt;div class="col"&gt;
              &lt;img class="center-block image-center" width="150" src="imagery/4.png"/&gt;
          &lt;/div&gt;
      &lt;/div&gt;
  
      &lt;div class="row"&gt;
          &lt;div class="col"&gt;
              &lt;img class="center-block" width="150" src="imagery/5.png"/&gt;
          &lt;/div&gt;            &lt;div class="col"&gt;
              &lt;img class="center-block" width="150" src="imagery/6.png"/&gt;
          &lt;/div&gt;            &lt;div class="col"&gt;
              &lt;img class="center-block" width="150" src="imagery/7.png"/&gt;
          &lt;/div&gt;            &lt;div class="col"&gt;
              &lt;img class="center-block" width="150" src="imagery/8.png"/&gt;
          &lt;/div&gt;
      &lt;/div&gt;
  </code></pre>