如何使 iframe 居中，响应式

Question

我有一小部分 html 代码，并且喜欢 iframe 只有一半大小，但位于页面中心：

这里是页面：https://www.outdoorequipped.com/active/contacts

<div class="row">
<div class="map-container">
<iframe src="https://www.google.com/maps/embed?pb=!1m0!3m2!1sen!2s!4v1451982933747!6m8!1m7!1sIT5z6S82FJMAAAQZdjRuFQ!2m2!1d34.238620415813!2d-77.94889641093141!3f55.18!4f0!5f0.7820865974627469" height="250" width="600"></iframe>
</div>
</div>

还有她我的css：

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

/* 16x9 Aspect Ratio */
.map-container-16x9 {
  padding-bottom: 56.25%;
}

/* 4x3 Aspect Ratio */
.map-container-4x3 {
  padding-bottom: 75%;
}

.map-container iframe {
  position: absolute;
  top:0;
  left: 0;
  width: 100%;
  height: 100%;
}

知道如何正确地做吗？

Answer 1

这就是你想要做的吗？

.map-container iframe {
    position: absolute;
    top: 25%;
    left: 25%;
    width: 50%;
    height: 50%;
}

还是这个？ （无绝对定位）

.map-container iframe {
    width: 50%;
    display: block;      
    margin: auto;
}

这取决于你是否也想垂直居中。