How do I center an iframe?

Question

I've been trying to center a couple of iframes on this page link. However, every example I have seen I've tried and doesn't work. You can clearly see the parallax floating div that isn't centered and at the bottom the iframe for an html page is floating to the right and not centering as well.

Any help would be much appreciated.

Solution 1

http://codepen.io/mlegg10/pen/zqLdJy change the css padding-top and bottom to suit your needs

/* Flexible iFrame */

.Flexible-container {
  position: relative;
  padding-bottom: 56.25%;
  padding-top: 30px;
  height: 0;
  overflow: hidden;
}
.Flexible-container iframe,
.Flexible-container object,
.Flexible-container embed {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}

<!-- Responsive iFrame -->
<div class="flexible-container">
  <object width="100%" data=""https://drive.google.com/file/d/0BxrMaW3xINrsR3h2cWx0OUlwRms/preview"&amp;toolbar=0&amp;navpanes=0" type="application/pdf">
      <embed width="100%" type="application/pdf" src="https://drive.google.com/file/d/0BxrMaW3xINrsR3h2cWx0OUlwRms/preview"?scrollbar=0&amp;toolbar=0&amp;navpanes=0">
    </object>
</div>

Solution 2

display:block + margin:auto;

iframe {
  display:block;
  margin:auto;
}

<iframe></iframe>