title: HTML CSS: how horizontally center browser modal window containing iframe?
body: <p>I'm using a modal window to play a video file. For <code>modal-body</code> widths less than about 500 px; the modal window appears centered horizontally, but above that, it grows to the right, so that by 900px, it's falling off the window on the right side. Any way to fix that? The video is always perfectly framed by the modal window, it's just the modal window whose left-to-right I can't get centered.</p>
  
  <p>Also, I'd like to set the <code>modal-body</code>max-width property to prevent it growing above a certain size, but be responsive to the browser window below that size. Is this possible?</p>
  
  <p>Normally I'd use Bootstrap 3.3.6 <code>embed-responsive-16by9</code> to get a responsive solution, but this only works with 16x9 aspect ratios, and the videos I'm showing are an odd-ball aspect ratio. Not sure how else to do it.</p>
  
  <pre><code>&lt;div class="modal fade" role="dialog" aria-labelledby="videoModal" aria-hidden="true"&gt;
      &lt;div class="modal-dialog"&gt;
          &lt;div class="modal-content"&gt;
              &lt;div class="modal-body" style="width: 900px; margin: 0 auto; padding: 0px;"&gt;
                  &lt;div align="center" style="width: 100%; height: 0; 
                                      padding-bottom: 64.5%; position: relative; margin: 0px; 
                                      padding-top: 0px; padding-left: 0px; padding-right: 0 px;"&gt;
                      &lt;iframe style="position: absolute;
                                     top: 0; left: 0;
                                     width: 100%; height: 100%; 
                                     margin: 0px; padding: 0px;" 
                                     src="" frameborder="0" 
                                     allowfullscreen&gt;&lt;/iframe&gt;
                  &lt;/div&gt;
              &lt;/div&gt;
          &lt;/div&gt;
      &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>