CSSのinsetプロパティで上下左右の中央に配置する時の「position: fixed;」での新しい記述方法

中央揃えの古典的なテクニックの一つ、モーダルやメッセージなどを表示する時に適したposition: fixed;での新しい記述方法を紹介します。

古い記述方法では、負のパーセンテージを使用していたり、あまり直感的ではないCSSでしたが、新しい記述方法ではそれらが解消されています。

CSSのinsetプロパティで上下左右の中央に配置する時の「position: fixed;」での新しい記述方法

CSSの中央揃えのいろいろな方法は、以前の記事をご覧ください。
現在主流の5つのテクニックからそれぞれの特徴と最も万能で信頼できるテクニックを評価しています。

CSS 中央揃えの実装テクニック

CSSの中央揃えで、最も万能で信頼できる実装テクニック

この記事では、position: fixed;での新しい記述方法を紹介します。上下左右の中央に配置する古い記述方法は、下記の通りです。

見慣れた構文なので、「これは中央配置のCSSだ!」とすぐに分かると思いますが、初めてこのCSSを見たときは何をするためなのか分かりませんでした。

上下左右の中央に配置する新しい記述方法は、下記の通りです。

insetプロパティは、top, right, bottom, leftの各プロパティに対応する省略形です。IEを除く、すべてのブラウザでサポートされています。
参考: MDN

inset: 0;は、すべての辺に適用される値を0にします。margin: auto;は、margin-left;とmargin-right;の両方がauto;の場合、適用される値は等しくなり、要素を含むブロックの端を基準にして要素を水平方向の中央に配置します。
古い記述方法に比べて、理にかなったCSSです。

参考: CSSのプロパティの値に「auto」を使ったテクニックのまとめ

実際の動作は、下記でご覧ください。

See the Pen
Position Fixed Centering - New vs Old
by Elad Shechter (@elad2412)
on CodePen.

元ツイートは、こちら。

sponsors

top of page

©2024 coliss