CSSを使用して2つのイメージを重ねて＆センタリングする

Question

私はウェブサイトを作成しており、2つのイメージを重ね合わせる必要があります。トップイメージは中央に配置されますが、ブロック全体をページの中央に配置する必要があります。私はページをスケール可能にする必要があるので、私は絶対的な配置を使用できるとは思わない。

私が使用しています -

img.center { display: block; margin-left: auto; margin-right: auto; } 

は、ページ上の画像を中央に。

私はこれを非常にうまく説明しているかどうかはわかりませんので、次のモックアップが役に立ちます。

私はオーバーレイ画像の中に周りを見回しているが、彼らはすべての絶対位置を使用しているようだと私はイメージが常にその方法を使用してセンタリングされるように、それを動作させるように見える傾けます。

どうすればよいですか？いくつかのサンプルコードが非常に有用である場合、または正しい方向のちょうどポイントである場合。

ありがとうございました。

Answer 1

<div class="img_cont"> 
    <img src="1.png" alt="" class="first"/> 
    <img src="2.png" alt="" class="second"/> 
</div> 
<style type="text/css"> 
    div { 
     width: 300px; 
     height: 300px; 
     position: relative; 
      margin: 0 auto; 
    } 

    .first { 
     width: 100%; 
     height: 100%; 
    } 

    .second { 
     position: absolute; 
    } 
</style> 
<script type="text/javascript"> 
    $(".home_click").css("left", ($(".img_cont").width() - $(".second").width())/2 + "px"); 
    $(".home_click").css("top", ($(".img_cont").height() - $(".second").height())/2 + "px"); 
</script> 

Answer 2

negative offset techniqueを使用できます。

<div class="img_cont"> 
    <img src="1.png" alt="" class="first"/> 
    <img src="2.png" alt="" class="second"/> 
</div> 
<style> 
.first, .second{ 
    margin:0 0 0 -200px; /* where 400px is width offset is/2) */ 
    position:absolute;top:0;left:50%; 
} 
.second{ 
    margin:0 0 0 -100px; /* let's guess second image was 200px wide */ 
} 
</style> 

Answer 3

<style type="text/css"> 
 
\t body { 
 
    margin: 0px; 
 
} 
 

 
.height-100vh { 
 
    height: 100vh; 
 
} 
 

 
.center-aligned { 
 
    display: box; 
 
    display: flex; 
 
    box-align: center; 
 
    align-items: center; 
 
    box-pack: center; 
 
    justify-content: center; 
 
} 
 

 
.background-image { 
 
    position: relative; 
 
} 
 

 
.text { 
 
    position: absolute; 
 
} 
 
</style>

<div class="height-100vh center-aligned"> 
 
    <img class="background-image" src="http://i.imgur.com/1aBfM.png" /> 
 
    <img src="http://i.imgur.com/DH3Qw.png" class="text"> 
 
</div>