【CSS】モーダル（display:fixed）を天地左右中央に配置する方法
モーダルやメッセージなどの「position: fixed;」の要素を。天地左右中央に表示する時の新しい記述方法を紹介します。
今までは、transform を（負のパーセンテージ）を使用したりで、少し複雑な記述方でしたが、新しい記述方法では簡素で理解しやすい記述方法になっています。
今までの記述法は、下記のように top,left と transform の translate を使用して設定していました。
position:fixed; left: 50%; top: 50%; transform: translateX(-50%) translateY(-50%);
新しい記述方法は insetプロパティ を使用して次のように記述します。
position: fixed; inset: 0; margin: auto;
insetプロパティとは、 top, right, bottom, left に対応する一括指定のプロパティです。
/* <length> 値 */ inset: 10px; /* すべての辺に適用される値 */ inset: 4px 8px; /* 上/下 左/右 */ inset: 5px 15px 10px; /* 上 左/右 下 */ inset: 2.4em 3em 3em 3em; /* 上 右 下 左 */ /* 包含ブロックの幅 (左/右) または 高さ (上/下) に対する <percentage> */ inset: 10% 5% 5% 5%; /* キーワード値 */ inset: auto; /* グローバル値 */ inset: inherit; inset: initial; inset: unset;
ここでは、このinsetプロパティを０に設定することにより、margin:auto の場合は top, right, bottom, leftに適用される値が等しくなり、天地左右中央に配置されるようになります。
