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

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

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

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

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

position: absolute;で指定する方法

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

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

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

サンプルはこちら

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

HTML

<div class="wrap">
  <img src="https://dev-lib.com/media/wp-content/uploads/2018/09/4_020_02.jpg" />
</div>

</div>

CSS

.wrap {
  width: 100%;
  height: 500px;
  border: 1px solid #333333;
  position: relative;
}
.wrap img {
  width: 300px;
  height: auto;
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  margin: auto;
}

.wrap {

width: 100%;

height: 500px;

border: 1px solid #333333;

position: relative;

}

.wrap img {

width: 300px;

height: auto;

position: absolute;

top: 0;

bottom: 0;

left: 0;

right: 0;

margin: auto;

}

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

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

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

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

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

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

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

HTML

<div class="wrap">
  <div class="inner"></div>
</div>

</div>

CSS

.wrap {
  width: 100%;
  height: 500px;
  border: 1px solid #333333;
  position: relative;
}
.wrap .inner {
  width: 50%;
  height: 50%;
  background: #86cb9e;
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  margin: auto;
}

.wrap {

width: 100%;

height: 500px;

border: 1px solid #333333;

position: relative;

}

.wrap .inner {

width: 50%;

height: 50%;

background: #86cb9e;

position: absolute;

top: 0;

left: 0;

right: 0;

bottom: 0;

margin: auto;

}

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

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

display: flex;で指定する方法

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

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

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

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

サンプルはこちら

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

HTML

<div class="wrap2">
  <img src="https://dev-lib.com/media/wp-content/uploads/2018/09/4_020_02.jpg" />
</div>

</div>

CSS

.wrap2 {
  width: 100%;
  height: 500px;
  border: 1px solid #333333;
  display: flex;
  justify-content: center;
  align-items: center;
}
.wrap2 img {
  width: 300px;
  height: auto;
}

.wrap2 {

width: 100%;

height: 500px;

border: 1px solid #333333;

display: flex;

justify-content: center;

align-items: center;

}

.wrap2 img {

width: 300px;

height: auto;

}

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

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

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

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

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

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

HTML

<div class="wrap2">
  <div class="inner"></div>
</div>

</div>

CSS

.wrap2 {
  width: 100%;
  height: 500px;
  border: 1px solid #333333;
  display: flex;
  justify-content: center;
  align-items: center;
}
.wrap2 .inner {
  width: 50%;
  height: 50%;
  background: #86cb9e;
}