イメージは2 divの中間にあります

Question

2 divs、div 1を持っています& 2イメージの中央にイメージがあります。どのようにすればいいのですか？

Answer 1

次の2つのdivの周りにラップを利用し、次のように絶対にラップ内の画像を配置したいと思います。

html, 
 
body { 
 
\t height: 100%; 
 
\t margin: 0; 
 
} 
 
.wrap { 
 
\t height: 100%; 
 
} 
 
.image { 
 
\t display: block; 
 
\t left: 50%; 
 
\t top: 50%; 
 
\t transform: translate(-50%, -50%); 
 
\t position: absolute; 
 
} 
 
.div1, .div2 { 
 
\t width: 100%; 
 
\t height: 50%; 
 
\t float: left; 
 
} 
 
.div1 { 
 
\t background: red; 
 
} 
 
.div2 { 
 
\t background: blue; 
 
}

<div class="wrap"> 
 
\t <img src="https://i.imgur.com/NS73UoB.png" alt="Asshat" height="200" class="image"> 
 
\t <div class="div1"></div> 
 
\t <div class="div2"></div> 
 
</div>

Answer 2

#containerは単に要素を配置することができるように使用されます。 #pictureはあなたの写真に置き換えられるべきである 「magix」は、あなたが望むところでこの画像を置くことになる絶対位置と左上にあります。 50％〜50ピクセルで調整します。画像サイズを補正するために-50px

#container { 
 
position: relative; 
 
} 
 

 
#one, #two { 
 
width: 100%; 
 
height: 100px; 
 
background: red; 
 
} 
 

 
#two { 
 
background: blue; 
 
} 
 

 
#picture { 
 
background: green; 
 
position: absolute; 
 
left: calc(50% - 50px); 
 
top: calc(50% - 50px); 
 
width: 100px; 
 
height: 100px; 
 
}

<div id="container"> 
 
<div id="one"> 
 
</div> 
 
<div id="two"> 
 
</div> 
 
<div id="picture"> 
 
</div> 
 
</div>