【HTML/CSS】画像やブロックを中央揃えにしたい!!のに出来ない時に見る記事 Part.2「上下センタリング編」
以前書いたの中央揃えの記事「左右センタリング編」の続きです。
今回は「上下・天地センタリング編」
画像の中央に文字を配置したり、ファーストビューで画面の中央にレイアウトしたり、ポップアップウィンドウを浮かび上がらせたり、色々使いどころが多いですよね。
いくつか方法がありますが、一番簡単楽ちんなFlexを活用した方法で解説します。
display: flex;にalign-items: center;で上下センタリング
Flexの使い方は以前のこちらの記事で解説しました↓
横並びとタイトルをつけてますが、ちゃんと縦並びの揃え方も文中で解説しています。
縦の揃え方には「align-items」というプロパティをFlexを指定した囲みに指定します。
縦、上下の中央揃えには「align-items: center;」です。
左右揃えにjustify-content: center;を使えば上下左右どちらも中央に配置させることができます。
display: flex; CSSの指定、解説図
外側の<div>や<p>にclassをつけて、CSSでそのclassに対して
- display: flex;
- align-items: center;
- justify-content: center;
この3つのプロパティを指定すれば、中身の要素が図のように中央揃えになります。
他にもpositionやcalc()を使う方法などもあります
positionを使った方法などFlex以外の方法もありますが、今回解説したFlexでの手法が今は一番簡単だと思います。
縦横中央揃えのレイアウトデザインをWebで活用したい方は是非参考にしてみてください。
リンク
リンク