【CSS】insetを使って上下左右を中央に配置

はじめに

insetはtop right bottom left を一括で指定できるプロパティです。
絶対配置をして天地中央に要素を配置する場合、insetを使用すると、コードを簡潔にまとめることができます。

やりたいこと

子要素を天地中央に配置します。

実装サンプル

HTML

<div class="container">
  <div class="box"></div>
</div>

 

親要素のCSS

.container {
  position: relative;
  width: 100%;
  height: 100vh;
}

 

古い指定方法

.box {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  margin: auto;
  background-color: #eec020;
  width: 150px;
  height: 150px;
}

 

insetを使用した新しい指定方法

.box {
  position: absolute;
  inset: 0;
  margin: auto;
  background-color: #eec020;
  width: 150px;
  height: 150px;
}

 

対応ブラウザ

主要ブラウザでサポートされています。（2024年07月31日現在）

まとめ

inset: 0 と position: fixed を指定すると画面全体に背景を覆うことができます。モーダルウィンドウやローディング画面を表示させる時に使えます。

.container {
  background-color: #cdcdcd;
  inset: 0;
  position: fixed;
}

insetを知らなかったので、活用していきたいと思います。

参考サイト

こちらのサイトを参考にさせていただきました。

 

 

• WEB
• 技術情報