개요

이미지의 표시 위치를 제어하는 ​​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;
}