【CSS】position: fixed; で上下左右の中央に配置する新しい記述方法【inset】

position: fixed; で上下左右に中央寄せする際の新しい記法を備忘録メモ。

position: fixed; で上下左右に中央寄せする際の従来の書き方としては↓が有名だと思います。

.hoge {
  position: fixed;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%)
}

で、新しい記述方法はこちら↓

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

キモは『 inset: 0; 』です。

inset プロパティ

insetプロパティは、top, right, bottom, leftの各プロパティを一括指定する省略形です。

margin や padding のショートハンドみたいなものですね。

で、今回使った『 inset: 0; 』は、

.hoge {
  position: fixed;
  /*  */
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  /*  */
  margin: auto;
}

と同じ意味になります。

IE以外のブラウザでサポートされているので、今後使う機会が増えそうですね。