css - オーバーフロー要素を他の要素の中央に配置

Question

次のような div 内に iframe があります。

<section>
   <div>
      <iframe></iframe>
   </div>
</section>

iframe にはフラッシュの YouTube ビデオが含まれていますが、この場合はおそらく問題になりません。

私はモザイクを作成しているため、div を使用して iframe を適切なサイズにトリミングしようとしています。

これはによって行われます

.section
    {height: 251px;
    width: 198px;
    overflow: hidden}

うまく機能しますが、ビデオも中央に配置したいと思います。画像の場合は、背景画像として追加して使用します

background-size: cover

それらを中央に配置します。可能な最大サイズに自動的に再スケーリングされるため、これは便利です。ただし、これはビデオでは機能しません。可能であれば、iframe を垂直方向と水平方向の中央に配置するだけで解決します。

score 2 · Accepted Answer

これを css に追加すると役立ちますか? div が section よりも大きい場合に機能します。

section div {
    margin-top:-50%;
    margin-left:-50%;
}

score 0 · Accepted Answer

iframe を折り返してtext-align: center;水平方向の中央揃えに使用する

div {
text-align: center;
display: block;
}

また

iframe { 
margin: 0 auto; 
display: block;
}

4 に答える 4