2枚の画像を重ねて縦中央に揃えつつレスポンシブに対応したい時

あちこちで語り尽くされているとは思うのですが、2枚の画像を重ね、上に配置した画像を縦横の中央にセンタリングしたい時があります。
情報が錯綜していて、結構ごちゃごちゃになってしまって、かなり試行錯誤したのですが。
自分なりにまとめてうまくいった方法を紹介します。

このように、2つの画像を縦横中央に揃えたい場合ですが、少なくとも私の場合、片方を背景画像にしようとして失敗しました。
というのも、レスポンシブwebデザインに対応しようとしていたのです。

なので、あまり良い方法ではないかもしれないのですが、positionとz-indexを使いました。

HTML

[code]
<div class="box">
<div class="background"><img src="tanbo.jpg" alt="1枚目の画像"></div>
<div class="photo"><img src="heartbrain.jpg" alt="2枚目の画像"></div>
</div>
[/code]

CSS

[code]
.box {
position:relative;
top: 50%;
}
.box .background { z-index: 0; }
.box .photo {
z-index: 10;
position: absolute;
top: 50%;
left: 50%;
-webkit-transform: translate(-50%,-50%);
transform: translate(-50%,-50%);
}
.box .photo img {
width: 30%;
max-width: 150px;
height: auto;
}
[/code]

私が確認した限り、問題はありませんでした。

上のコードは、下の画像が width: 100% であることが前提です。
横サイズを限定したい場合は、下の画像のサイズも指定すると、その通りに表示されると思います。きっと。

【ハートブレーン】https://blog.heart-kokoro.net