在两列中垂直对齐内容

Question

我想将内容（标题，图像等）垂直放置在每列内部。我尝试使用align-items: center;，text-align: center;和vertical-align: middle;。似乎没有任何作用。有什么建议吗？

@import url(https://fonts.googleapis.com/css?family=Montserrat+Slab:400,700);
body,
html {
  font-family: 'Montserrat', serif;
  height: 100%;
}

body {
  background: #F4F4F4;
}

h1 {
  text-transform: uppercase;
  font-size: 1.4em;
  color: #535353;
  margin-bottom: 0.2em;
}

p.subtitle {
  font-size: 1em;
  color: #858585;
  margin-top: 0;
}

.btn {
  background-color: #09BBE9;
  padding: 1em;
  color: #fff;
  font-weight: bold;
  margin-top: 2em;
  display: inline-block;
  border-radius: 5px;
  text-decoration: none;
}

.container {
  display: flex;
  align-items: center;
}

.column-1,
.column-2 {
  float: left;
  width: 50%;
}

<div class="container">
  <div class="column-1">
    <h1>H1 Title</h1>
    <p class="subtitle">Small Title 1</p>
    <a href="#" class="btn">Join up or Sign in</a>
  </div>
  <div class="column-2">
    <p class="subtitle">Small Title 2</p>
  </div>
</div>