Cacher is the code snippet organizer for pro developers

/* This parent can be any width and height */
.block {
  text-align: center;
}
 
/* The ghost, nudged to maintain perfect centering */
.block:before {
  content: '';
  display: inline-block;
  height: 100%;
  vertical-align: middle;
  margin-right: -0.25em; /* Adjusts for spacing */
}

/* The element to be centered, can
   also be of any width and height */ 
.centered {
  display: inline-block;
  vertical-align: middle;
  width: 300px;
}

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");

}