iframe要素を中央寄せする方法を解説！

HTMLのiframeはYoutubeなど他サービスのコンテンツを自分のWEBサイトやブログに埋め込むことが出来る便利なタグです。

しかしiframeで埋め込んだコンテンツの中身はCSSが効かず、その配置や見た目の部分で少しやっかいです。

今回はiframe要素の位置の問題で中央寄せ（センタリング）する方法について解説していきます。

それではiframe要素を中央寄せする方法を順番に解説していきます。

今回はサンプルとして下記のYoutube動画の埋め込みで中央寄せしてみたいと思います。

まずはiframeをブロック要素にして中央寄せする方法です。下記がiframeを中央寄せしたサンプルコードになります。

別タブで開いて確認したい方はコチラから確認できます。上記のサンプルではiframeをブロック要素にしてmargin: 0 autoで中央寄せしています。

更にmax-width: autoとしているので、ブラウザの横幅を縮めてもレスポンシブな見た目になっています。

iframeはインライン要素のためtext-align: centerが利きます。

下記のサンプルコードではiframeに親要素をもうけ、親要素の.wrapで中央寄せをかけています。

上記のサンプルコードを別タブで開いて見たい方はコチラから確認出来ます。

最後にflexboxを利用した方法です。flexboxでは水平方向の位置の調整はjustify-contentプロパティを利用します。

上記のサンプルコードを別タブで確認したい方はコチラ。

いかがでたでしょうか。iframeを中央寄せする方法はいくつかの選択肢があります。

人によってはtext-align: centerがやりやすかったり、ブロック要素・flexboxがやりやすかったりなど好みや、状況に応じて良し悪しがあるかと思います。

ぜひ今回紹介したiframeの中央寄せのやり方の中で一番やりやすい方法で実践してみて下さい！