组织div元素

Question

我想组织我的三个div元素，以便在图片中看起来像beliow。我怎么能这样做？

Answer 1

这是一些基本代码

＆＃13;

＆＃13;

/* 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;
}

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;

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