要素を垂直方向縦の中央真ん中に配置したいのにvertical-align: middleが効かない時の対応方法[CSS]

ウェブ制作において、要素を垂直方向縦の中央真ん中に配置したい事があります。

しかし、要素を真ん中に指定できるはずの「vertical-align: middle」を使用しても、効かない時があり、「あれ、前はいけてたのに、勘違いかな…」みたいな事が結構あったりします。

それには、しっかり理由がありますので、その点もふまえて実装方法と注意点の解説をしていきたいと思います。

「vertical-align: middle」を利用する

それでは、解説していきますね。

今、以下のような状況で「サンプルテキスト」という文字を、垂直方向縦の中央真ん中に配置したいとします。

CSSで、中央に配置する代表（というか、わかりやすく勉強するプロパティ）といえば、「vertical-align: middle」ですね。

ですので、「vertical-align: middle」を以下で設定したいと思います。

うまく実装できませんでしたね。

「vertical-align: middle」とは？

それでは、そもそも「vertical-align: middle」とは何なのか、今一度確認しておきましょう。

「vertical-align: middle」とは、インライン要素、またはテーブル要素に対して、垂直方向縦の中央真ん中に要素を配置する事ができるプロパティです。

ですので、DIVのようなブロック要素には効かない事になります。

具体的なサンプルを元に話していきますね。

以下の場合、「サンプルテキスト」は「メインコピー」のベースラインの沿って配置されるのがわかります。

しかし、spanはインライン要素ですので、「vertical-align: middle」が効きます。ですので、指定する事で要素を垂直方向縦の中央真ん中に配置する事ができます。

また「vertical-align: middle」はテーブル要素にも効きます。以下は、通常のテーブルになります。

初期設定のテーブルのままなら、左のセル「メインテキスト」が上よりになっていますね。

これに「vertical-align: middle」をかけると垂直方向縦の中央真ん中に配置する事ができます。

ブロック要素に「vertical-align: middle」を効かせる

さて、前提の説明として脱線しましたが、今回の問題は、DIV（ブロック要素）の中の要素を垂直方向縦の中央真ん中に配置する事でした。

上記で説明していたように、DIVはブロック要素ですので「vertical-align: middle」は効きません。

そんな時は以下の方法で対応する事ができますので、お好みに合わせてご利用ください。

「display: table-cell」を利用する

displayプロパティに「table-cell」という「値」を与える事で、<table>要素と同じ動作が可能になります。

ですので上記説明の通り、テーブル仕様にする事で「 vertical-align: middle」が利用できるようになるという発想です。

「line-height」を利用する

line-heightプロパティを利用しても実装可能です。

line-heightは文字の高さを指定できるプロパティですが、以下のように高さ（height）が決まっている際は有効に使えます。

実装方法は、line-heightをheightの値（高さ）と同じすればOKです。

そうする事で、文字の上下のスペースが確保され、真ん中に配置されているように見えるという発想です。

ちなみに、heightの値が指定されていなくても有効にはなります。

「display: flex」を利用する

「display: flex」には色々な活用方法があり、一概にこれ！という使い方はないのですが、要素を中央に寄せたい時にも利用できます。

「display: flex」を利用する事で、フレックスボックス化する事ができ、そうする事で交差軸に合わせてアイテムを揃える事ができます。

交差軸の説明は少し難しいので今回は省略（覚えなくても大丈夫です）しますが、フレックスボックス化する事によって、「align-items」プロパティが利用できるようになり、要素を垂直方向縦の中央真ん中に配置する事が可能になります。

ただし、「display: flex」を使用する事によって、「text-align」などで横方向の位置指定ができなくなります。

ですので、「display: flex」を使用して、要素をど真ん中に配置したい場合は、align-itemsプロパティとは逆方向、すなわち水平方向の真ん中を指定する事ができる「justify-content」プロパティを利用すると良いでしょう。

「display: flex」は大変便利なツールでもありますが、ゴリ押し配置の制御ができなく事もなりますので、しっかり理解した上で利用できるようになるのが良いと思います。

まとめ

いかがでしたでしょうか？

要素を垂直方向縦の中央真ん中に配置する事で大事な事は、その要素がブロック要素なのか、インライン要素なのか、テーブル要素なのかということをまず把握する事が大事です。

インライン要素とテーブル要素の場合は、「vertical-align: middle」が効きますので、とっても簡単です。

しかし、ブロック要素の場合は、上記で説明したように少し手間がかかる事を覚えておき、焦らず対応していきましょう。

どの方法で実装するかは、その状況により変わってくると思いますので、その状況に応じて使い分けられるように、デザインの引き出しに入れておきましょう。