iframeタグが中央寄せにならない理由が知りたい

Question

    <div class="mv">
        <iframe  src="https://www.youtube.com/embed/yn" frameborder="0" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
    </div>

.mv {
  position: relative;
  height: 0;
  padding-top: 40%;
  margin: 0 auto;
  width: 90%;
}

iframe{
  position: absolute;
  top: 0;
  left: 0;
  width: 80%;
  height: 100%;
  margin: 0 auto;
  display: block;
 
}

上記のやり方ではなぜうまくいかなかいのでしょうか。
iframe要素の幅は変えずに中央寄せにする方法はありますか。

Answer 1

上記のやり方ではなぜうまくいかなかいのでしょうか。

position: absolute;を指定しているからです。
これは、要素の位置を絶対座標位置にするため、margin: 0 auto;が効いてないんです。
（親要素が、position: relative;の設定をしているので、その要素の左上が基準に絶対座標位置となる）

iframe要素の幅は変えずに中央寄せにする方法はありますか。

位置を調整するには、yambejpさんのご回答通りですが、
div.mv要素の横幅の80%という設定なので、
div.mvの大きさが変動した場合は、iframeの実横幅が変化してしまいます。
それが嫌なら、px絶対値で横幅固定しましょう。

Comments

[退会済みユーザー]

要素の位置を絶対座標位置にするため、margin: 0 auto;が効いてないということはautoではなく、単位指定したら（margin:60pxなどのように）効く理由はなんでしょうか

[miyabi_pudding]

px値であるからです。
また、margin: 0 10%;とかでも効くはずですよ。
autoは"自動"、ですので、absolute時のmargin: autoは、それは"自動"なので、
効かないとなるのは当たり前です。
（その要素のposition、displayのプロパティ値の仕様に則った自動値、となる）
つまり、absolute時のmarginのauto値は（自動）は、0ってことです。

Answer 2

position: absolute;がよくないです。

html{
  height:100%;
}
.mv {  
padding-top: 40%;  
margin: 0 auto;  
width: 90%;  
height: 100%;  
}  

iframe{  
width: 80%;  
height: 100%;  
margin: 0 auto;  
display: block;  

}  

Comments

[退会済みユーザー]

上記の方法だとiframeは親の領域の左上が基準位置にならずpadding-topの領域分下に位置づけられ、画面の表示される領域も半分以下になってしまうのですが。

[Lhankor_Mhy]

padding-top は asai-8961さんが元々つけていたスタイルです。
なんのためにあるのかわからなかったので残しておきましたが、不要なら削除すればいいのでは？

Answer 3

iframeが.mvの左右真ん中にくればいいんですか？
であればiframeのwidthが80%なので
leftを10%にしてください

Comments

[退会済みユーザー]

ありがとうございます。でもなぜ、margin:0 autoは効かないのでしょうか。

[yambejp]

全体的によけいな修飾してませんかね

.mv {
background-Color:yellow;
margin: 0 auto;
height:40%;
width: 90%;
}

iframe{
margin: 0 auto;
top: 0;
width: 80%;
height:100%;
display: block;
}
くらいで調整すればよいかと