マンガでわかるホームページ作成

CSS テキストや画像やボックスを上下中央に寄せる方法

左右中央寄せはけっこう簡単ですが、上下中央寄せはちょっと工夫が必要…だったのは一昔前。

今はCSS3が使えるのでけっこう簡単に上下中央寄せができます。

テキストや画像やボックスを上下中央に寄せる方法を説明します。

結論

以下の3つをセットで使いましょう。

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

テキスト上下中央寄せ例

テキスト

html

<div class="example">テキスト</div>

CSS

.example{
    width: 200px;
    height: 200px;
    border: 1px solid #999;
    background: #f2f2f2;
    display: flex;
    justify-content: center;
    align-items: center;
}

htmlの「テキスト」の部分を画像やボックスにすることも可能です。

画像上下中央寄せ例

ボックス上下中央寄せ例

まとめ

テキストや画像やボックスを上下中央に寄せるには下記3つをセットで使いましょう。

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

以上、テキストや画像やボックスを上下中央に寄せる方法でした。

関連記事