【CSS】insetプロパティでpositionの上下左右配置を簡単に指定する方法

positionの上下左右（top left right bottom）を一括で指定したい。

本記事ではこのような悩みを解決します。

insetプロパティでpostion配置を指定する方法

/* 中央配置 */
span {
  height: 10px;
  width: 100px;
  position: absolute;
  /* 上下左右を0指定 */
  inset: 0;
  margin: auto;
}

positionの上下左右（top left right bottom）を一括で指定したコード例です。

通常、ある要素をpositionで中央配置にするにはtop left right bottomプロパティを0に指定にします。

insetプロパティを使う事で、margin、paddingプロパティと同じように一括で上下左右を指定できます。

insetプロパティの使い方は以下の通りです。

inset: 上右下左;

本コード例では0を指定。

上記によって、top、right、bottom、leftプロパティを全て0指定したものと同じ意味になります。

CSSのinsetプロパティでpositionの上下左右配置を簡単に指定する方法について紹介しました。

以上で解説を終わります。