ABCウェブエンジニアblog

Webデザイナー/エンジニア/講師のホームページ・ウェブサイト制作の備忘録

【HTML/CSS】画像やブロックを中央揃えにしたい!!のに出来ない時に見る記事 Part.2「上下センタリング編」

要素の天地中央揃えの方法。html/css

 以前書いたの中央揃えの記事「左右センタリング編」の続きです。

 

webabc.hatenablog.jp

 

今回は「上下・天地センタリング編」

 

画像の中央に文字を配置したり、ファーストビューで画面の中央にレイアウトしたり、ポップアップウィンドウを浮かび上がらせたり、色々使いどころが多いですよね。

いくつか方法がありますが、一番簡単楽ちんなFlexを活用した方法で解説します。

 

 

display: flex;にalign-items: center;で上下センタリング

 Flexの使い方は以前のこちらの記事で解説しました↓

 

webabc.hatenablog.jp

 

横並びとタイトルをつけてますが、ちゃんと縦並びの揃え方も文中で解説しています。

 

縦の揃え方には「align-items」というプロパティをFlexを指定した囲みに指定します。

縦、上下の中央揃えには「align-items: center;」です。

左右揃えにjustify-content: center;を使えば上下左右どちらも中央に配置させることができます。

 

display: flex; CSSの指定、解説図

天地・上下左右中央揃えの実装、display:flexでの解説図

外側の<div>や<p>にclassをつけて、CSSでそのclassに対して

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

この3つのプロパティを指定すれば、中身の要素が図のように中央揃えになります。

 

他にもpositionやcalc()を使う方法などもあります

positionを使った方法などFlex以外の方法もありますが、今回解説したFlexでの手法が今は一番簡単だと思います。

縦横中央揃えのレイアウトデザインをWebで活用したい方は是非参考にしてみてください。

 

webabc.hatenablog.jp