title: Center an iframe for desktop and mobile
body: <p>I can't manage to get my Google Maps iframe to be centered on the page. I want the iframe to be responsive also. How can I make it responsive and centered? Below is my code.</p>
  
  <p>CSS:</p>
  
  <pre><code>.video-container {
    position: relative;
    padding-bottom: 56.25%;
    padding-top: 30px; 
    height: 0; 
    overflow: hidden;
  }
  </code></pre>
  
  <p>HTML:</p>
  
  <pre><code>&lt;div class="video-container"&gt;
    &lt;iframe src="https://www.google.com/maps/embed?pb=!1m0!3m2!1shr!2shr!4v1472200012915!6m8!1m7!1sF%3A-DjYDCrslZys%2FV79nfhQh6CI%2FAAAAAAAAC4Y%2F_3uT6StsL1YugvYPQXUgUGfAF_jN1MVzgCLIB!2m2!1d45.81664123898513!2d15.8375560739745!3f73.63479769484006!4f-19.58591212686629!5f0.4000000000000002" frameborder="0" width="560" height="315" allowfullscreen&gt;&lt;/iframe&gt;
  &lt;/div&gt;
  </code></pre>