Centring a div vertically and horizontally with CSS Flexbox (tested on Chrome 30, Safari 6, Firefox 24, Mobile Safari iOS 7, Mobile IE 10)

flexbox.css

.parent {
  display: flex;
  height: 500px;
}

.child {
  max-width: 20em;
  margin: auto;
  border: solid 1px;
}

/* alternative */
.flexcontainer {
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-flex-direction: row;
  -ms-flex-direction: row;
  flex-direction: row;
  -webkit-align-items: center;
  -ms-flex-align: center;
  align-items: center;
  -webkit-justify-content: center;
  -ms-flex-pack: center;
  justify-content: center;
}