【CSS】意外と盲点『上下』中央ぞろえ

左右中央揃えはmargin:0 auto;など有名ですが

意外と盲点な「上下」中央揃えの紹介をします！

意外と利用用途はあるので知っておくと便利です！

●line-height

一行しかないテキストにオススメ

行間＝親要素の高さにすると親要素に対して上下中央揃えにできます。

※複数行には使えないので注意！

●display:inline-block; vertical-align:middle;

一番コンテンツの多い要素の高さに合わせて上下中央揃えになってくれます。

文字数の差が大きいメニューなどにオススメ。

display: inline-block;

vertical-align: middle;

★padding

1行でも複数行でもOK！

高さが決まってない場合に、padding上下に同じ値を入れましょう。

padding: 10px 0;

●position

親要素に対して

position:relative;

子要素に

position:absolute;
top: 0;
bottom: 0;
margin: auto;

と記述すると上下中央揃えになります

(left:0; right:0;を加えると上下左右中央にも！)

●display:flex;

親要素に

display: flex;

子要素に

align-items: center;

を指定するだけで、上下中央揃えになります！！

個人的に一番シンプルで簡単なのでオススメ◎

正しい効果測定は、正しい計測設定から！Googleアナリティクス設定項目チェックシート（無料）

Googleアナリティクスは、適切な初期設定を行って初めて、解析に役立つデータを計測できます。 正しい効果測定を行う上で、必要な設定項目のチェックシートをご用意しました。