you tubeをcssで中央寄せする方法を教えてください。

自分でHPを作っていますが、youtubeを埋め込んだ後に中央寄せにする方法がわかりません。
分かる方は教えていただけませんでしょうか。
打ち込んでいるHTMLとCSSを貼っておきますので、間違いがあればそれも指摘していただけるとありがたいです。
よろしくお願いいたします。




HTML
-------------------------

<div class="a2 movie-wrap"><iframe width="560" height="315" src="https://www.youtube.com/embed/8QQafRn1NXc" frameborder="0" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe></div>

CSS
------------------------

.movie-wrap {
margin:0 auto
position: relative;
padding-bottom: 56.25%; /*アスペクト比 16:9の場合の縦幅*/
height: 0;
overflow: hidden;
}

.movie-wrap iframe {
position: absolute;
top: 0;
left: 0;
width:80%;
height:100%;
}

-----------------------------
（divにmargin:0 auto;をかけても、iframeの方にtext-alignをかけても中央寄せになりません。）

No.1 ベストアンサー 回答者： t_fumiaki 回答日時： 2019/03/24 14:33

ハマリ処ですね。

先ず、margin:0 auto ⇒ margin:0 auto; ←;を忘れずに！

次に
.movie-wrapに　border:solid 1px #000;　を追加して表示確認して見て下さい。
原因が解りますので。

つまり、
<div>の幅が既に横一杯の100%なので、中央に寄りません。

.movie-wrapにwidth:80%;を追加して
表示を確認しながら値を調整して下さい。

この回答へのお礼

解決しました！ありがとうございます。
親要素・子要素がまた曖昧でひとりじゃ理解できない部分も多く…助かりました。
本当にありがとうございます！

お礼日時：2019/03/28 13:06

No.2 回答者： t_fumiaki 回答日時： 2019/03/24 14:37

1個、忘れました。

.movie-wrap iframe中のwidth:80%は100%にして下さい。

親要素に対する%なので、親要素のdivに対する幅%です。
100%にして置けば、div側だけで調整できます。