Organizing div elements

Question

I want to organize my three div elements so that the look like in the picture beliow. How can I do that?

Answer 1

This is some basic code

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