insetプロパティでつくる上下左右中央揃え

ひとりCSS Advent Calendar 2022 23日目です。

inset プロパティを使ってみます

inset プロパティとは

top, right, bottom, left を指定できるショートハンド。

inset で作る上下左右中央

背景画像を置いたボックスを画面の上下左右中央に配置するようにしました。

<div class="wrapper">
  <div class="img-box"></div>
</div>

.wrapper {
  height: 100vh;
  position: relative;
}

.img-box {
  position: absolute;
  inset: 0;
  margin: auto;
  width: 150px;
  height: 180px;
}

メモ

• 途中まで margin:auto を指定し忘れていた
  • 指定しないと中央に行かない
• top, right, bottom, left それぞれに 0 を指定せずに済むの楽だな

参考

• https://developer.mozilla.org/ja/docs/Web/CSS/inset