组织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; 
}