position: fixed;を使ったときの上下左右の中央配置について

ポップアップ系のUIをコーディングするとき、画面の中央に表示するためにCSSを触ったことのある方は多いと思う。 position: fixed; を使うケースが多いが、そのときは昔から次のようなコードを書いて対応してきた。

.popup {
  position: fixed;
  margin: auto;  
  top: 0;
  bottom: 0;
  right: 0;
  left: 0;
}

冗長な書き方だけど、これを使ったことのある方は多いだろう。この配置を短く書く方法が inset である。iOS: 14.1以降の対応であるため、レガシーデバイスの対応には時期尚早だったりもするが、とりあえず下記のように書くことができるようになった。

.popup{
  position: fixed;
  inset: 0;
  margin: auto;
}

注意点としては、上２つの書き方は、ポップアップのサイズが指定されていないときは画面全体にポップアップが広がってしまうことだ。そのため、我々はまだ次の書き方を続ける必要がありそうだなと思った次第です。

.popup{
  position: fixed;
  left: 50%;
  top: 50%;
  transform: translateX(-50%)
             translateY(-50%);
}