<div id="wrapper">
  <div id="content">
    Wello!
  </div>
</div>
#wrapper {
  position: relative;
  width: 100px;
  height: 100px;
  background-color: #2980b9;
}

#content {
  /* important part */
  position: absolute;
  top: 50%;
  height: 40px;
  margin-top: -20px;
  
  
  /* for the shinies */
  width: 100%;
  background-color: #16a085;
}

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.