【CSS】画面中央に画像やボックスを配置する方法

画面中央に画像やボックスを配置するにはCSSに3行追加するだけで中央に配置することが可能です。
中央に配置したい場合は、この方法を試してみてください!

画面中央に配置する方法

画面中央に配置するには、親となるボックスを作成しその中に子となるボックスを作成します。

今回は、HTMLに2つdivタグでボックスを作成します。

<div class="main-box">
<div class="center-box"></div>
</div>

この2つのdivタグにクラスを付けCSSでレイアウトします。

.main-box{
width:100%;
height:100vh;
background:#318648;
}
.center-box{
width:50px;
height:50px;
background:#f74637;
}

CSSを記入後、確認すると画面いっぱいにのメインボックスの中に子のボックスが入っている状態になります。

ボックスが2つ出力される

この中に入っている子のボックスを画面中央に配置します。

画面中央に配置するには、CSS内の.main-boxの中に3つ追加するだけで画面中央に子のボックスが配置されます。
.main-boxに下記コードを追加します。

display: flex;
justify-content: center;
align-items: center;

これで画面中央に、子のボックスが配置されます!

See the Pen
Untitled by yuki (@yuki_web)
on CodePen.

画像を配置するには、子のボックスにimgタグを入れたりすることで画像を中央に配置することができます。