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.

display:block + margin:auto; ..... did you search a bit ? :) — G-Cyrillus, Jul 20 '16 at 18:06
I searched for about 2 hours, so yes :) I did try that before. It doesn't work for whatever reason. — Calle, Jul 20 '16 at 18:12
Again, Oriol, I have tried that. That would obviously be the first thing I would try. I wouldn't be asking if that worked. — Calle, Jul 20 '16 at 20:10

score 5 · Answer 1 · answered Jul 20 '16 at 18:08

5

display:block + margin:auto;

iframe {
  display:block;
  margin:auto;
}

<iframe></iframe>

answered Jul 20 '16 at 18:08

G-Cyrillus

101,410
14
105
129

score 5 · Accepted Answer · answered Jul 20 '16 at 18:38

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>

How do I center an iframe?

2 Answers2