HTML5、CSS3上でGoogle mapの埋め込みを中央寄せかつ、縦横比を固定してレスポンシブ対応させたい

前提・実現したいこと

HTML5、CSS3上でGoogle mapの埋め込みを中央寄せかつ、縦横比を固定してレスポンシブ対応させたい

発生している問題・エラーメッセージ

縦横比が固定されたまま、画面幅に合わせて縮小、拡大だけをさせること、中央寄せだけをさせることはできているのですが、両方を適用することができません。

以下のコードは、縦横比を固定させて画面幅に合わせて縮小、拡大できる状態です。
HTML5

<section class="access">
<div class="map-container">
<iframe src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d6493.68550742672!2d135.19397868356944!3d34.6855791619222!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x60008ef78409d861%3A0x27b99d6be70896a4!2z5p2x6YGK5ZyS5Zyw!5e0!3m2!1sja!2sjp!4v1559750440267!5m2!1sja!2sjp" width="800" height="400" frameborder="0" style="border:0" allowfullscreen></iframe>
</div>
</section>

CSS3

.map-container {
  position: relative;
  width: 75%;
  padding-top: 50%; /* = height ÷ width × 100 */
}
.map-container iframe {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}

試したこと

.map-container直下のiframeをblock要素にして、margin:auto;を追加したが、適用されない。
.map-containerにtext-align:center;を追加したが適用されない。
position rightを0にすると、画面幅に合わせて縮小、拡大されない。

補足情報

ブラウザはGoogle chromeを使用しています。

行動規範の内容に同意します

回答1件

ベストアンサー

ビュー系単位~~とcalc~~使うのが一番簡単かと

css
1.map-container {
2  position: relative;
3  width: 90vw; /* vwは、ビューの横幅に対して%をとることができる単位 */
4  margin: 50vh auto 0; /* vhはビューの高さに対して%をとることができる単位 */
5}
6.map-container iframe {
7  position: absolute;
8  top: -45vw; /* 親が、90vwの状態かつiframeが、横幅に対して、半分の高さで、真ん中に寄せたいため */
9  left: 0;
10  width: 100%;
11  height: 45vw; /* 親が、90vwなので、その半分の45vw */
12}