title: How to horizontally center content of iframe (Google Map)? Usual methods not working
body: <p>I want to get an embedded map effect like this one: <a href="http://themeforest.net/item/yalu-creative-multipurpose-template-html/full_screen_preview/4569177" rel="nofollow">http://themeforest.net/item/yalu-creative-multipurpose-template-html/full_screen_preview/4569177</a> except I need to do it with an iframe not JS like in the example.
  My sections have a max width but the map's container is set to overflow:visible to allow the iframe to show through.</p>
  
  <p>I have tried the following CSS on the map div and the iframe itself too:</p>
  
  <pre><code>display:block;
  margin:auto;
  text-align: center;
  </code></pre>
  
  <p>and they didn't work.
  Please help... thank you.</p>
  
  <p>My HTML:</p>
  
  <pre><code>&lt;div class="section"&gt;
  &lt;h2&gt;Where we are &lt;/h2&gt;
      &lt;div class="map"&gt;
          &lt;iframe width="605" height="250" frameborder="0" scrolling="no" marginheight="0" marginwidth="0" src="https://maps.google.co.uk/maps?f=q&amp;amp;source=s_q&amp;amp;hl=en&amp;amp;geocode=&amp;amp;q=3-4+High+Street+Hitchin+SG5+1BH&amp;amp;aq=&amp;amp;sll=51.48931,-0.08819&amp;amp;sspn=0.868785,2.113495&amp;amp;ie=UTF8&amp;amp;hq=&amp;amp;hnear=3-4+High+St,+Hitchin+SG5+1BH,+United+Kingdom&amp;amp;t=m&amp;amp;ll=51.947915,-0.278864&amp;amp;spn=0.013226,0.051842&amp;amp;z=14&amp;amp;iwloc=A&amp;amp;output=embed"&gt;&lt;/iframe&gt;
      &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>My CSS:</p>
  
  <pre><code>div.section { 
   width: 80%; 
   max-width: 600px; 
   margin: 0 auto 40px;
  }
  
  div.map { 
   margin: auto; 
   width: 100%; 
   height: 25rem;
  }
  </code></pre>
  
  <p>I also have the following script going on, to set the iframe width depending on screen width (the default 605 width is there because iframes must have a set width in the HTML AFAIK:</p>
  
  <pre><code>if($(window).width() &lt; 1100) {
      $('iframe').attr("width", $(window).width());
  }
  else {
      $('iframe').attr("width", "1100");
  }
  </code></pre>
  
  <p>Fiddle here: <a href="http://jsfiddle.net/Ykx2w/" rel="nofollow">http://jsfiddle.net/Ykx2w/</a></p>