CSSのinsetプロパティで上下左右の中央に配置する時の「position: fixed;」での新しい記述方法
Post on:2021年7月12日
sponsors
中央揃えの古典的なテクニックの一つ、モーダルやメッセージなどを表示する時に適したposition: fixed;での新しい記述方法を紹介します。
古い記述方法では、負のパーセンテージを使用していたり、あまり直感的ではないCSSでしたが、新しい記述方法ではそれらが解消されています。
CSSの中央揃えのいろいろな方法は、以前の記事をご覧ください。
現在主流の5つのテクニックからそれぞれの特徴と最も万能で信頼できるテクニックを評価しています。
この記事では、position: fixed;での新しい記述方法を紹介します。上下左右の中央に配置する古い記述方法は、下記の通りです。
|
1 2 3 4 5 6 7 |
.popup{ position: fixed; left: 50%; top: 50%; transform: translateX(-50%) translateY(-50%); } |
見慣れた構文なので、「これは中央配置のCSSだ！」とすぐに分かると思いますが、初めてこのCSSを見たときは何をするためなのか分かりませんでした。
上下左右の中央に配置する新しい記述方法は、下記の通りです。
|
1 2 3 4 5 |
.popup{ position: fixed; inset: 0; margin: auto; } |
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.
元ツイートは、こちら。
💡The new #CSS way for centering with 'position: fixed'.@CodePen demo:https://t.co/jOBYH0Nytl
* Works in all evergreen browsers. pic.twitter.com/gfBwbFqKJ7
— Elad Shechter (@eladsc) July 6, 2021
sponsors
