CSSで画像やブロック要素をど真ん中に表示する方法

通常はHTML要素は左上から順に構築されます。

文章を書いても画像を貼り付けても、左上を基準に配置されます。

でも時には真ん中に表示させたいときもあると思います。

今回は、上下左右の中央、つまりど真ん中に画像やブロック要素を表示するためのCSSの書き方をご紹介します。

position: absolute;で指定する方法

position: absolute;は表示基準からの位置を指定する方法です。

画像などを特定の要素の中央に表示する場合には、中央表示したい要素の親要素に対して position: relative; を指定する必要があります。

ど真ん中に表示する設定は主に中央に寄せたい要素に対して行います。

画像をど真ん中に表示する場合

HTML

CSS

中央表示させたいエリア(.wrap)に position: relative; を記載します。

.wrap のそれ以外はサイズと線の指定だけです。

 

そして画像要素(img)に対しては、position: absolute; を指定して、top, bottom, left, right には 0 を指定します。

この 0 という値は数値ならばなんでもいいです。100pxでも52%でもいいです。autoで無ければよいです。

それと margin: auto; をつければ完成です。

 

これで上下左右の中央ど真ん中に画像を表示できます。

ブロック要素(div)をど真ん中に表示する場合

HTML

CSS

ブロック要素の場合も画像と同じです。

若干違う部分がありますが、色や線をつけただけです。

display: flex;で指定する方法

display: flex;はCSS3から追加された設定で、ブロック要素を柔軟に配置するためのものです。

これは中央に寄せる要素ではなく、その親要素に設定します。

下のサンプルコードを見れば分かりますが、画像やブロック要素には色やサイズなどしか設定していません。

新しいやり方なのでこちらの方を採用したらいいかもしれません。

画像をど真ん中に表示する場合

HTML

CSS

まず親要素(.wrap2)に display: flex; を設定します。

justify-content: center; で左右中央に寄せます。

align-items: center; で上下中央に寄せます。

align-itemsプロパティですが、なんかクロス軸方向の指定ってなんかに書いてありましたけどよく分かりません。

色んな値を設定して実験してみたら縦方向な感じでした。

ブロック要素(div)をど真ん中に表示する場合

HTML

CSS

ブロック要素でも画像でも親要素で指定するためやってることは同じです。

その他の方法

他にも display: table-cell; を使って、vertical-align で縦方向を指定する方法もあります。

僕はテーブルでも無いのにわざわざテーブルようにdisplay設定をして使うのは気持ち悪いです。

もちろんこれでも出来るので正解でしょうけど・・・

まとめ

position: absolute; を使い基準位置から中央に寄せる方法。

display: flex; を使い親要素で柔軟に位置(並べ方)を指定する方法。

display: flex;はCSS3からの新しい方法なのでこちらがおすすめだけど、ブラウザが古い場合はposition: absolute;がいいかも。

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

CAPTCHA