insetプロパティを使ってposition:absolute;の要素を上下左右中央配置にする方法【CSS】

みなさんはposition:absolute;の要素を上下左右中央の配置する場合、CSSでどんな記述をしているでしょうか?
今回解説するinsetプロパティを使用すると、楽に上下左右中央配置にする事ができますので、ぜひ使ってみてください。

これまでの方法などはCSSで要素を上下左右中央(縦横中央)配置する方法【CSS】で解説しています。

insetプロパティについて

insetプロパティは、top・right・bottom・leftの各値を一括で指定出来るプロパティとなります。
marginやpaddingプロパティの一括指定と同じ構文で記述する値の個数で以下のように変わります。

/* top・right・bottom・leftを10px */
.box {
    inset: 10px;
}

/* top・bottomを10px、right・leftを20px */
.box {
    inset: 10px 20px;
}

/* topを10px、right・leftを20px、bottomを30px */
.box {
    inset: 10px 20px 30px;
}

/* topを10px、rightを20px、bottomを30px、leftを40px */
.box {
    inset: 10px 20px 30px 40px;
}

これまでのposition:absolute;での上下左右中央配置

最近は使用頻度は減ったのかもしれませんが、少し前まではposition:absolute;の要素の上下中央配置は以下のような2つの形が主流でした。

.box {
    margin: auto;
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
}

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

上記のように、どれも記述する内容が多くて結構面倒だったかと思います。
insetプロパティを使用すると、記述する内容も少なくて済みますので積極的に使用していきたいですね。

insetプロパティを使用した上下左右中央配置

次にinsetプロパティを使用した方法をみていきます。
記述する内容は以下のようになります。

.box {
    margin: auto;
    position: absolute;
    inset: 0;
}

いかがでしょうか?記述する内容も少なくてとても使いやすいかと思います。
insetプロパティは、2020年頃から徐々に各ブラウザで対応し始めた比較的新しいプロパティになりますので、古いバージョンのブラウザの対応が必要な場合は注意してください。

さいごに

いかがでしたでしょうか。
今回は、insetプロパティを使ってposition:absolute;の要素を上下左右中央配置にする方法を解説しました。

insetプロパティを使うと、記述内容が少なく楽に設定できますので、ぜひ使ってみてください。