#HTML・CSS・JavaScript

CSSで要素を縦中央に並べる方法3選（画像でもテキストでもどんなサイズでも使えます）

CSSでは「margin:0 auto」や「text-align:center」等、横中央のレイアウトは結構知られているのですが、縦方向の中央に配置するやり方はあまり聞く機会がないかもしれません。
今回はそんな縦中央配置をカンタンに実装できる方法3つをご紹介。
コードがシンプルなのはもちろん、画像でもテキストでもOK。要素がどのようなサイズでも行けますよ〜。

Webデザインとブログで豊かに引きこもる。

Webデザインは器。ブログは中身。
「レンちゃんとペンタ」では、2つのスキルを掛け合わせて、
おウチで豊かに楽しく暮らす方法をご紹介しています。

「position:absolute」と「transform: translateY」を使う方法

サンプル
今回紹介する3種の中では一番古典的な方法です。
紹介するコードはこちら。div要素の中に、img要素を縦中央で配置します。

<div>
  <img src="penta.png" alt="ペンタ" />
</div>

div{
  position: relative;
  width: 100%;
}

img{
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
}

解説
ここではposition:relative/absoluteによる、座標配置を利用しています。

・親要素(div)：「position:relative」で座標の基準にする
・子要素(img)：「position:absolute」で、親要素を基準に上から半分の位置(top:50%)に配置

div{
  position:relative;
}

img{
  position:absolute;
  top:50%;
}

どうしてかというと、こういう処理がされているからです。

画像の上端が、上から50%の位置に来てるわけですね。
そこで、transformプロパティを組み合わせて、ペンタの画像を半分（50%）上に返してあげると…。

div{
  position:relative;
  width:100%;
}

img{
  position:absolute;
  top:50%;
  transform: translateY(-50%); /* ペンタの画像サイズの半分だけ、上方へ移動 */
}

真ん中に戻ってきてくれます。

ややこしいのは、コードの中で2回登場した「50%」の解釈。
それぞれ基準対象が異なるのが注意点です。

・top:50%：親要素の高さの半分
・transform: translateY(-50%)：自分自身の高さの半分

コード自体はシンプルなので、しくみだけ理解してしまえばカンタンに使いこなせます。

Flexbox（フレックスボックス）を使う方法

続いては、Flexbox（フレックスボックス）を使う方法。コチラはとってもカンタンです。

サンプル

<div>
  <img src="penta.png" alt="ペンタ" />
</div>

div{
  display:flex;
  align-items:center;
}

解説
縦中央レイアウトを実現している直接のCSSは「align-items:center」です。
ただ、align-itemsはFlexbox（フレックスボックス）の中身を縦中央に配置するためのプロパティなので「display:flex」を合わせて使う必要があります。

Flexbox（フレックスボックス）と言えば、複数要素を横並びにする時にお馴染みの手法ですが、今回のように要素が一つしかない場合でも実装自体は可能です。
なので、縦中央配置にするだけの目的でFlexbox（フレックスボックス）を使った、というのがコチラでご紹介した方法です。

グリッドレイアウトを使う方法

Flexbox（フレックスボックス）と同様の発想で、グリッドレイアウトを利用する手もあります。

サンプル

<div>
  <img src="penta.png" alt="ペンタ" />
</div>

div{
  display:grid;
  align-items:center; /* align-content:center; でもOK*/
}

解説
Flexbox（フレックスボックス）と同じように、縦中央にするためだけに要素をグリッドレイアウトにしてしまう、という考え方です。
縦中央配置自体は「align-items:center」で実現されていますが、これを使うには親要素がグリッドコンテナになっている必要があるので「display:grid」を加えています。

「align-items」の代わりに「align-content」を使うことも可能です。
本来の目的でグリッドレイアウトを使う場合には両者の役割は違いますが、今回はどちらを使っても同じ結果になります。

3つの使い分けは？

カンタンなのは当然、Flexbox（フレックスボックス）やグリッドレイアウトを使った方法ですが、利用条件として親要素に「display:flex」もしくは「display:grid」が設定できる状況である事が必要です。
制作中のデザインによってはそれができない場合もあると思うので、その際は最初に紹介したpositionとtranslateYの合わせ技を使うといいですね。

まとめ

要素を縦中央に配置する方法を3種ご紹介しました。

「position:absolute」と「transform: translateY」を合わせて使う方法
Flexbox（フレックスボックス）を使う方法
グリッドレイアウトGridを使う方法

今回はpositionやFlexbox（フレックスボックス）、グリッドレイアウトが大活躍しましたが、いずれもスタイルシートの中では少し分かりにくい方に分類されますよね。
せっかくですからこの機会を利用してrelativeやabsoluteの使い分けやFlexbox（フレックスボックス）の多彩な使い方、グリッドレイアウトの基本をしっかりマスターしてしまうのもオススメです。