title: Bootstrap modal dialog center image in body
body: <p>I am trying to center an image (both horizontally and vertically) in a modal dialog body.  I have tried every permutation of everything I know.  top / left = 50%, margin 0 auto, class=center-block... Read through the bootstrap documentation and I am stumped.  Here is my html... Any help would be greatly appreciated</p>
  
  <pre><code>&lt;div id="processing" class="modal fade"&gt;
      &lt;div class="modal-dialog" style="max-width: 350px"&gt;
          &lt;div class="modal-content"&gt;
              &lt;div class="panel-heading modal-header dialog-header"&gt;
                  &lt;h4 class="modal-title"&gt;Please Wait...&lt;/h4&gt;
              &lt;/div&gt;
              &lt;div class="modal-body" style="height: 230px;"&gt;
                  &lt;img src="~/images/ajax-loader.gif" class="img-responsive" /&gt;
              &lt;/div&gt;
          &lt;/div&gt;
      &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>EDIT:
  Thank you Chun for the response, but it did not achieve the desired results.
  Here is a link to 2 images.  One is the result from Chun's suggestion, the other is a manipulated image to exhibit my desired result.
  <a href="https://www.dropbox.com/sh/kj2no3ovgivjjt8/AAAarW9SjuBjYMWZPCUaKebua?dl=0" rel="nofollow">https://www.dropbox.com/sh/kj2no3ovgivjjt8/AAAarW9SjuBjYMWZPCUaKebua?dl=0</a></p>