画像をある範囲内の左右中央、上下左右中央に配置させたいことはよくあると思います。

また、画像はクライアントが入れるからどんなサイズの画像が入るか分からないけど、
画像の中心がエリアの中央に配置されるようにしたいなど。

画像の配置に関する記述をいくつか紹介します。
（随時更新するかも）

デモサイト

1.画像サイズが決まっているときエリア内で左右中央揃え

こんな場合に使えます。

• ある範囲内で左右中央揃えにしたい。
• 画像のサイズは決まっていて、変更はない

HTMLはこちら

<div class="pattern1">
  <img src="../images/IMG1.jpg" alt="">
</div>

imgタグを囲うタグを用意しておきます。

CSSはこちら

.pattern1 {
  width: 500px;
  height: 467px;
  overflow: hidden;
  position: relative;
}
.pattern1 img {
  position: absolute;
  left: 50%;
  margin-left: -400px;
}

画像を囲うタグにposition:relativeとoverflow:hiddenを指定します。
画像にはposition:absoluteを指定し、left:50%としておきます。

そして、画像の横幅半分のpx数分マイナスマージンで移動させます。

こうすることで、ある範囲内で左右中央に画像を持ってこれます。

2.エリアの中で上下左右中央揃え

こんな場合に使えます。

• ある範囲より小さい画像
• 範囲内の上下左右中央の位置に画像を配置したい。

HTMLはこちら

<div class="pattern2">
  <img src="../images/IMG1.jpg" alt="">
</div>

同じくimgタグを囲うタグを用意しておきます。

CSSはこちら

.pattern2 {
  width: 500px;
  height: 500px;
  position: relative;
}
.pattern2 img {
  position: absolute;
  display: block;
  width: 400px;
  height: auto;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  margin: auto;
}

こちらも同じく画像を囲うタグにposition: relativeを指定。

画像にはposition: absoluteを指定し、上下左右を0に。
さらに、marginをautoにします。

3.画像サイズが決まっていない場合でも画像の中心を基準に上下左右中央揃え

こんな場合に使えます。

• 画像のサイズは決まっていない（クライアントが更新したりする）。
• 画像の中央が必ずある範囲内の中央に配置されるようにしたい。

HTMLはこちら。

<div class="pattern3">
  <img src="../images/IMG1.jpg" alt="">
</div>

こちらも同じ感じです。

CSSはこちら

.pattern3 {
  width: 500px;
  height: 467px;
  overflow: hidden;
  position: relative;
}
.pattern3 img {
  position: absolute;
  min-width: 100%;
  min-height: 100%;
  left: 50%;
  top: 50%;
  -webkit-transform: translate3d(-50%, -50%, 0);
     -moz-transform: translate3d(-50%, -50%, 0);
           -ms-transform: translate(-50%, -50%);
          transform: translate3d(-50%, -50%, 0);
}

これも囲うタグにはposition: relative、画像にはposition: absoluteを指定します。

そして、leftとtopを50%と指定し、transform: translate3d(-50%, -50%, 0)を指定します。

これで、範囲内の中央に画像の中心が来るようになります。

min-width:100%とmin-height:100%は必須ではないですが、
これがない場合、画像の横か縦が範囲より小さい場合に余白ができてしまいます。

それを防ぐために、最低でも範囲内の横幅か縦幅は確保しようという記述です。

こうしておけば、例えばクライアントが更新していくような場合で画像のサイズが不明でも、
被写体は写真の中央に撮るように伝えておけば、ある程度担保とれそうです。

さいごに

画像を配置するちょっとしたテクニックでした。

また見つけ次第、随時更新していこうと思います。