【CSS】要素を上下方向の中央揃えにする方法【vertical-alignで上手くいかない？】

CSSを使ってヘッダーを作っていて、要素を上下方向の中央揃え・中央寄せしたいけど上手くいかないなあ。という場合にflexを使ってカンタンに中央寄せできる方法をご紹介します。

ボクは2018年春からプログラミング学習を始めて約1年。HTMLとCSSを一通り勉強したので、サイト模写を進めていたりもします。

header要素を書いて入れ子にしてヘッダーを作っていると、上下方向の中央寄せに全くできずついついイラっとしたり、フラストレーションがたまりませんか？

ヘッダーは一番最初にコーディングする要素なのに、ボクもいきなり上下方向の中央寄せでつまずきました。

marginを上下に使って中央寄せにできるけど、なんかちゃんとしたコードじゃない気がしちゃいますね。

要素を「 display:inline-block; 」にして、

vertical-align : middle ; を設定したら中央寄せにできるらしいことを知りました。

いざ使ってみると、テコでも動かず、もう一気に疲れちゃいました。

調べてみると、実は、vertical-align : middle ; での中央寄せは本来上下方向に対しての中央寄せの目的として使わないことを知りました！

そこで上下方向の中央寄せする方法について調べてみると、「flex」を使うのが便利そうだし、今の流れに合っているみたいです。

そこで今回は、flexを使って上下方向の中央寄せにする方法をご紹介します。

flexは機能が多くて、覚えられないけど、用途に合わせて必要な機能を調べて使うのが良いかと思いました。

一度学習すると、あえて使おうとしてしまいますが、必要に駆られて機能を使うのが自然な使い方と思いました。

それでは、CSSのflexプロパティを使ってヘッダーで上下方向の中央寄せにする方法をみていきましょう。

コンテナーの中の子要素・つまりHTMLがカンタンな構造、シンプルな構造にできている場合にオススメです。

親要素で全体を包むコンテナーに

display : flex ; とalign-items : center ;

を指定すると上下方向の中央寄せが上手くいきます。

スカイブルーの背景色の部分がヘッダーの領域で、黒っぽいボックスがコンテナーの中に入れた子要素です。

ちなみにflexにすると、子要素は自動的に横並びになります。

親要素であって全体を包むコンテナーに指定するだけで、子要素に動きが適用されるのがポイントですね。

コンテナーの中の子要素・つまりHTMLがごちゃごちゃしてマトリョーシカみたいに子要素の中にまた子要素があり何重もの入れ子の構造になっている場合にオススメです。

子要素の入れ子が何重にもなっているなどで「方法１」で上手くいかない場合は、中央寄せにしたい子要素に都度

align-self : center ; を指定して中央寄せにする感じの使い方です。

flexを指定している親要素に対して、align-self : center ;を指定した子要素が中央寄せになるイメージです。

当たり前ですが、プロパティを指定した親要素と子要素の関係を意識すると使いやすいかと思います。

align-self : center ;を指定したら、親要素はなんだったかな？と考えると、きちんと使えると思います。

改めて書きます。

親要素であるコンテナーに

display: flex ;

上下方向の中央寄せにしたい子要素に

align-self : center ;

を指定します。

以上がヘッダー内の要素をヘッダーの高さに対して中央寄せする方法です。

flexはいろんな機能がありますが、とても便利だと思いましたので、少しずつ覚えて使いこなしていきたいですね。