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;
以上、テキストや画像やボックスを上下中央に寄せる方法でした。