如何将iframe居中显示？

Question

我一直在尝试让这个页面上的几个iframe居中 link。然而，我尝试过的每一个例子都不起作用。你可以清楚地看到视差浮动的div没有居中，底部的html页面的iframe也没有居中，而是向右浮动。非常感谢您的帮助。

- Calle

---

display:block + margin:auto; ..... 你有搜索一下吗？ :) - G-Cyrillus

我搜索了约2小时，所以是的 :) 我之前试过了。由于某种原因，它不起作用。 - Calle

再说一遍，Oriol，我已经尝试过了。那显然是我会尝试的第一件事。如果那行得通，我就不会问了。 - Calle

Answer 1

display:block + margin:auto;

iframe {
  display:block;
  margin:auto;
}

<iframe></iframe>

- G-Cyrillus

Answer 2

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>

- mlegg