【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の上下左右配置を簡単に指定する方法について紹介しました。
以上で解説を終わります。
目次