【HTML/CSS】画像の表示位置（上下左右中央）を完璧に制御する

概要

画像の表示位置をコントロールするCSSの実装について、雑に記載します。
（今後の自分の備忘録も兼ねて。）

HTML/CSS

<div class="contents">
  <img class="image" width="128" height="128" src="image.png" />
</div>

.contents {
  width: 100%;
  height: 100vh;
  background-color: darkgray;
}

.image {
  /* ここに画像の表示位置をコントロールするCSSを書く */
}

CSSが何も当たっていない時の表示はこんな感じで、画像が左上に表示されます。

左中央

.image {
  top: 0;
  bottom: 0;
  margin: auto 0;
  position: absolute;
}

左下

.image {
  bottom: 0;
  position: absolute;
}

下中央

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

右下

.image {
  bottom: 0;
  right: 0;
  position: absolute;
}

右中央

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

右上

.image {
  right: 0;
  position: absolute;
}

上中央

.image {
  left: 0;
  right: 0;
  margin: 0 auto;
  position: absolute;
}

画面中央

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