【CSS】コンテンツの縦位置を真ん中に配置する方法

■ 「margin」でサイズ指定して縦位置を真ん中にする方法
■ 「display: grid」と「place-items: center」で縦位置を真ん中にする方法
■ 「display」「vertical-align」の組み合わせる方法
■ 「position」「top」の組み合わせる方法
■ 「table」の表を利用する方法
■ 「Javascript」で配置指定をする方法

「margin」プロパティで、
サイズ指定をすることで、
縦位置を真ん中あたりに指定することが可能。


「margin」プロパティは、
というように指定することができる。
「上」の部分に、値を記述することで、
コンテンツ上部に、スペースを入れることができる。

コンテンツが、縦方向の真ん中になる位置を計算して入力します。

同じ方法で、横位置を指定することも可能。


Back

「CSS」では、

・「display: grid」
・「place-items: center」

を使って、
コンテンツの縦配置を真ん中にすることができる。



横位置も真ん中に指定したい場合は、

「text-align: center」

を追加すれば、
縦横ともに、真ん中に配置することが可能。

サンプルコード

Back

「CSS」では、
「display」と「vertical-align」を組み合わせて、
コンテンツの縦配置を真ん中にするのが一般的。
縦配置にしたいコンテンツを囲んでいる要素を、
「display」プロパティで、「table-cell」にすることで、
「vertical-align」プロパティの「middle」設定が可能になり、
縦配置の真ん中にすることができる。

一番すっきりとしたCSSコードで簡単に配置が指定できる。

だが、サイズを指定いないと設定できなかったり、
「Javascript」で後からサイズ指定をすると、うまく機能してくれないこともある。
うまく機能してくれない時は、残りの方法のいずれかで実現する方が良い。

縦方向の配置を真ん中にするサンプルコード

Back

「CSS」の「position」「top」プロパティを使用しても、 縦位置の真ん中にコンテンツを配置できる。
「position」プロパティの「absolute」を指定することで、 好きな位置に配置指定できるようになるので、
「top」「left」「right」「bottom」プロパティで、
各辺からの距離を指定することで、配置場所を指定できる。

「p」「div」などのブロック要素の中にインライン要素「span」を入れ子にして、
「span」の位置を調整する形になる。

縦方向の配置を真ん中にするサンプルコード

Back

「table」タグで作った「表」のセルは、
「vertical-align」に対応しているので、
「middle」と設定すれば、縦方向の真ん中に配置されるようになっている。
「テーブルレイアウト」で配置をする方法。

「vertical-align: middle;」で反応がない場合は、
という方法も適用できる。
表は、レイアウトの強制力が強いので、最終的な手段の１つ。

縦方向の配置を真ん中にするサンプルコード

Back

「Javascript」を使えば、
モニターのサイズから、要素のサイズなど、
「querySelector()」プロパティで要素指定をして、
色々な情報を取得・設定することができるので、
サイズの指定も簡単に行うことができるが、
「Javascript」を身に着けるのは、
ちょこっと勉強が必要。

「Javascript」でサイズを指定できる書式

Back