これはかなり万能に使える！ たった3行のCSSで、要素を中央に絶対配置する新しい記述方法
Post on:2026年3月5日
sponsorsr
CSSで要素を中央に絶対配置、特にモーダル、メッセージ、スタック、ポップオーバーなどを中央配置するときに適したCSSの新しい記述方法を紹介します。
古い記述方法では、負のパーセンテージを使用していたり、直感的ではないCSSでしたが、新しい記述方法ではそれらが解消されています。また、中央以外に左上・右上・左下・右下などにも配置できます。
新しいといっても、すべてのブラウザに対応しています。
参考: Yet Another Way to Center an (Absolute) Element
CSSで要素を中央に絶対配置にする古い方法
まずは、CSSで要素を中央に絶対配置にする古い方法から。
|
1 2 3 4 5 6 |
.popnplop1 { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); } |
このCSSを初めて見たときは、なんでこれが中央になるのか分かりませんでした。しかし、コピペで使用するだけで簡単に中央に配置でき、重宝したものです。
仕組みを簡単に説明すると、要素の左上隅を50%の中央に移動させ、そこからさらに50%分戻して中央に配置します。
この古い方法について詳しくは、下記をご覧ください。
実際の動作は、デモページをご覧ください。
See the Pen
要素を中央配置にする古い方法 by coliss (@coliss)
on CodePen.
CSSで要素を中央に絶対配置にする新しい方法
続いて、CSSで要素を中央に絶対配置にする新しい方法。
|
1 2 3 4 5 |
.popnplop2 { position: absolute; place-self: center; inset: 0; } |
place-selfプロパティは、align-selfとjustify-selfのショートハンドです。これによりブロック方向とインライン方向の両方に同時に配置できます。
insetプロパティは、top, right, bottom, leftの各プロパティに対応するショートハンドです。
place-selfプロパティもinsetプロパティもすべてのブラウザでサポートされています。
place-self: center;は要素を水平と垂直方向の中央に配置し、inset: 0;はすべての辺に適用される値を0にします。古い記述方法に比べて、理にかなったCSSです。
実際の動作は、デモページをご覧ください。
See the Pen
要素を中央配置にする新しい方法 by coliss (@coliss)
on CodePen.
また、要素を中央に配置するだけでなく、align-selfやjustify-selfで他の位置（start, end, stretch）にしても問題なく機能します。
place-self: center;で、中央place-self: start;で、左上place-self: end start;で、右上place-self: start end;で、左下place-self: end;で、右下
下記は、startに変更し、左上に配置したデモです。
See the Pen
要素を左上に絶対配置にする新しい方法 by coliss (@coliss)
on CodePen.
sponsors
