vertically align div

HTML

<div class="wrapper">
  <div class="content">
    <p>text contents </p>
    <p>
      asdfasdfas afsdfasdfsadf asfsafasdfasdf
    </p>

  </div>
</div>

CSS

.wrapper {
  min-width: 500px;
  height: 400px; /* turn off this line to see the vertical middle effect gone */
  border: 2px dashed blue;
  padding: 10px;
}

.content {
  width: auto;
  height: auto;
  overflow-y: hidden; 
  border: 2px solid red;
  position: relative;
  -webkit-transform: translateY(-50%);
  -ms-transform: translateY(-50%);
  transform: translateY(-50%);
  top: 50%;
}


}