組織div元素

Question

我想組織我的三個div元素，讓圖片看起來像這樣。我怎樣才能做到這一點？

Answer 1

這是一些基本的代碼

/* for demo purposes */ 
 
html, body, #container { 
 
    text-align: center; 
 
    height: 100%; 
 
} 
 

 
/* main container */ 
 
#container { 
 
    position: relative; 
 
} 
 

 
#red { 
 
    height: 50%; 
 
    background:red; 
 
} 
 

 
#green { 
 
    background:green; height: 50%; 
 
} 
 

 
#yellow { 
 
    background:yellow; 
 
    position: absolute; 
 
    width: 50%; 
 
    height: 50%; 
 
    /* vertical centering */ 
 
    top:50%; 
 
    transform:translateY(-50%); 
 
    /* horizontal centering */ 
 
    left: 0; 
 
    right: 0; 
 
    margin:0 auto; 
 
}

<div id="container"> 
 
    <div id="red">Top</div> 
 
    <div id="green">Bottom</div> 
 
    <div id="yellow">Middle</div> 
 
</div>

Answer 2

這裏有一個選項是如何做到這一點：https://jsfiddle.net/x91qdxxh/

HTML：

CSS：

.full { 
    width: 200px; 
    height: 200px; 
} 

.upper { 
    background-color: red; 
    width: 100%; 
    height: 100px; 
} 

.lower { 
    background-color: green; 
    width: 100%; 
    height: 100px; 
} 

.middle { 
    background-color: yellow; 
    position: relative; 
    left: 50px; 
    top: -150px; 
    width: 100px; 
    height: 100px; 
}