如何在兩個div之間添加圖像

Question

如何在兩個div之間添加像這樣的「movie me」in this link在我的代碼code pen？

<div class="row-fluid"> 
    <div class="col-sm-6 col-xs-6" style="background-color: red;height: 100%"> 
     <hello> 
    </div> 
    <div class="col-sm-6 col-xs-6" style="background-color: blue;height: 100%"> 
     <hello> 
    </div> 
</div> 

Answer 1

使用Flexbox的（不知道這打破了自舉的行爲，但我認爲事實並非如此）：

HTML：

<div class="row-fluid"> 
    <div class="col-sm-6 col-xs-6" style="background-color: red;height: 100%"> 
    <hello> 
    </div> 

    <!--Example div could be an image--> 
    <div class="image"></div> 

    <div class="col-sm-6 col-xs-6" style="background-color: blue;height: 100%"> 
    <hello> 
</div> 

CSS：

.row-fluid { 
    height: 100%; 
    display : flex; 
    align-items : center; 
    justify-content :center; 
} 

.image { 
    /*Relevant part for image div*/ 
    position : absolute; 
    z-index: 100; 

    /*Less relevant part for image div*/ 
    width : 50px; 
    height : 50px; 
    background-color:green; 
} 

code pen