title: How to center an embedded Google map on a page?
body: <p>I understand that this is quite a simple procedure, but I search for an answer every time I try to finish designing this page and none of the solutions I've found here and on Google did the trick for me.</p>
  
  <p>I also understand that forcing an element to be centered is not exactly ideal, especially when there are so many different devices accessing the Internet these days, but I just want to get this done so I can focus on other issues.</p>
  
  <p>Here's the code:</p>
  
  <pre><code>    &lt;!DOCTYPE html&gt;
  
  &lt;html&gt;
  
  &lt;head&gt;
  
  &lt;title&gt;Como chegar&lt;/title&gt;
  
  &lt;style&gt;
  
  #container {
  
      width: 800px;
      height: 600px;
      margin: 100px auto;
  
  }
  
  #content {
  
      width: 800px;
      height: 500px;
      background-color: white;
  
  }
  
  .strips {
  
      width: 800px;
      height: 50px;
      background-image: url(spritepimentarosa.png);
      background-repeat: no-repeat;
      float: left;
  
  }
  
  .navBar {
  
      width: 250px;
      height: 50px;
      background-image: url(spritepimentarosa.png);
      background-repeat: no-repeat;
      float: left;
  
  }
  
  .nb1 {
  
      background-position: 0px -450px;
      margin-left: 25px;
  
  }
  
  .nb2 {
  
      background-position: -250px -450px;
  
  }
  
  .nb3 {
  
      background-position: -500px -500px;
      margin-right: 25px;
  
  }
  
  .nb1:hover {
  
      background-position: 0px -500px;
      margin-left: 25px;
  
  }
  
  .nb2:hover {
  
      background-position: -250px -500px;
  
  }
  
  .nb3:hover {
  
      background-position: -500px -450px;
      margin-right: 25px;
  
  }
  
  .logo {
  
      background-position: 0px -200px;
  
  }
  
  .footer {
  
      background-position: 0px -400px;
  
  }
  
  &lt;/style&gt;
  
  &lt;/head&gt;
  
  &lt;body bgcolor="#D63B77"&gt;
  
      &lt;div id="container"&gt;&lt;!-- beginning of container --&gt;
  
      &lt;div class="navBar nb1"&gt;&lt;/div&gt;
      &lt;div class="navBar nb2"&gt;&lt;/div&gt;
      &lt;div class="navBar nb3"&gt;&lt;/div&gt;
  
      &lt;div id="content"&gt;&lt;!-- beginning of content --&gt;
  
  
          &lt;iframe width="425" height="350" frameborder="0" scrolling="no" marginheight="0" marginwidth="0" src="http://maps.google.ie/maps?f=q&amp;amp;source=s_q&amp;amp;hl=en&amp;amp;geocode=&amp;amp;q=Avenida+S%C3%A3o+Camilo,+980,+Cotia+-+S%C3%A3o+Paulo,+Brazil&amp;amp;aq=0&amp;amp;oq=980,+avenida+sao+camilo&amp;amp;sll=-23.583184,-46.836844&amp;amp;sspn=92.879748,186.152344&amp;amp;t=m&amp;amp;ie=UTF8&amp;amp;hq=&amp;amp;hnear=Av.+S%C3%A3o+Camilo,+980+-+Cotia+-+S%C3%A3o+Paulo,+06709-150,+Brazil&amp;amp;ll=-23.583025,-46.83712&amp;amp;spn=0.037758,0.054932&amp;amp;z=14&amp;amp;iwloc=A&amp;amp;output=embed"&gt;&lt;/iframe&gt;&lt;br /&gt;&lt;small&gt;&lt;a href="http://maps.google.ie/maps?f=q&amp;amp;source=embed&amp;amp;hl=en&amp;amp;geocode=&amp;amp;q=Avenida+S%C3%A3o+Camilo,+980,+Cotia+-+S%C3%A3o+Paulo,+Brazil&amp;amp;aq=0&amp;amp;oq=980,+avenida+sao+camilo&amp;amp;sll=-23.583184,-46.836844&amp;amp;sspn=92.879748,186.152344&amp;amp;t=m&amp;amp;ie=UTF8&amp;amp;hq=&amp;amp;hnear=Av.+S%C3%A3o+Camilo,+980+-+Cotia+-+S%C3%A3o+Paulo,+06709-150,+Brazil&amp;amp;ll=-23.583025,-46.83712&amp;amp;spn=0.037758,0.054932&amp;amp;z=14&amp;amp;iwloc=A" style="color:#D63B77;text-align:center;font-size:180%"&gt;Ver mapa ampliado&lt;/a&gt;&lt;/small&gt;
  
  
      &lt;/div&gt;&lt;!-- end of content --&gt;
  
      &lt;div class="strips logo"&gt;&lt;/div&gt;
  
      &lt;div class="strips footer"&gt;&lt;/div&gt;
  
      &lt;/div&gt;&lt;!-- end of container --&gt;
  
  &lt;/body&gt;
  
  &lt;/html&gt;
  </code></pre>
  
  <p>If anyone can help me with this, it'd be much appreciated.</p>
  
  <p>Thank you.</p>