<div id="wrapper">
  <div id="content">
    Doloribus tempora minus alias distinctio voluptas voluptas. Harum sit omnis sint quibusdam. Consequatur cumque ut deserunt. Et natus deserunt placeat doloribus ut eius qui. Est sint qui voluptas ex fugit. Et quasi hic ea facere.
    Ut aut quas consectetur a error doloribus tempore. Id voluptate autem fuga cupiditate voluptate. Magnam totam dolor consectetur ipsa possimus voluptatem qui perspiciatis. Dicta animi labore rerum voluptates ea qui. Laborum libero odio minus quae qui et aut. Mollitia unde occaecati vel nulla.
  </div>
</div>
#wrapper {
  position: absolute;
  width: 80%;
  height: 80%;
  background-color: #2980b9;
}

#content {
  /* important part */
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  
  /* for the shinies */
  width: 100%;
  background-color: #3498db;
}

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.