html - 为桌面和移动设备居中 iframe

Question

我无法让我的 Google map iframe 位于页面的中央。我希望 iframe 也能响应。我怎样才能让它响应和居中？下面是我的代码。

CSS:

.video-container {
  position: relative;
  padding-bottom: 56.25%;
  padding-top: 30px; 
  height: 0; 
  overflow: hidden;
}

HTML:

<div class="video-container">
  <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></iframe>
</div>

Answer 1

只需在您的 div 上使用 text-align:center;。 https://jsfiddle.net/w0et2jz1/