Centralizando elemento na tela

HTML

<div class="wrapper">
  <div>
    Tão simples quanto isso.
  </div>
</div>

CSS

html, body {
  height: 100%;
  min-height: 100%;
}

.wrapper {
  height: 100%;
  min-height: 100%;
  display: -webkit-flex;
  display: flex;
  -webkit-align-items: center;
  align-items: center;
  -webkit-justify-content: center;
  justify-content: center;
  border: 1px solid rgba(0, 0, 0, .3)
}

.wrapper div {
  padding: 40px;
  border: 1px solid rgba(0, 0, 0, .3)
}