CodePen

HTML

            
              <div class="container">
  <div class="popup">Hello world<p>Paragraph</p><p>Paragraph</p><p>Paragraph</p><p>Paragraph</p><p>Paragraph</p><p>Paragraph</p><p>Paragraph</p></div>
</div>

            
          
!
via HTML Inspector

CSS

            
              html,body {
  width: 100%;
  height: 100%;
  padding:0;
  margin:0;
}

.container {
  width: 100%;
  height: 100%;
  background: #EEE;
  position: relative;
  text-align: center;
}
.container:before {
  content: '';
  display: inline-block;
  height: 100%;
  vertical-align: middle;
  margin-right: -0.25em;
}

.popup {
  display: inline-block;
  vertical-align: middle;
  
  width: 100%;
  max-width: 400px;
  text-align: left;
  background: #888;
  margin: 0 auto;
  line-height: 1.231;
  border: 2px solid red;
  
  /* IE7 */
   *display: block;
   *margin-top: expression(this.offsetHeight < this.parentNode.offsetHeight ? parseInt((this.parentNode.offsetHeight - this.offsetHeight) / 2) + "px" : "0");

}
            
          
!
? ?
? ?
Must be a valid URL.
+ add another resource
via CSS Lint

JS

            
              
            
          
!
Must be a valid URL.
+ add another resource
via JS Hint
Loading ..................