视口居中<div>对齐

Question

我尝试使用vh单位在视口中垂直居中内容，并希望在下方和右侧对齐第二个<div>，但仍然在视口中垂直居中。

换句话说，我希望.reference类在.content类的正下方对齐，并且两个元素在视口中垂直居中。

body {
  background: rgb(0, 14, 32);
  color: white;
  font-size: 2em;
}

.card { /* Should be vertically centered in viewport*/
  height: calc(100vh);
  display: flex;
  align-items: center;
  justify-content: center;
}

.content { /* Should be horizontally left aligned or centered in viewport*/
  float: left;
  border: solid white;
  margin: 2 em;
}

.reference { /* Should be right aligned and below .content <div> in viewport*/
  float: right;
  clear: both;
  text-align: right;
  font-size: 0.5em;
  margin: 2 em;
  border: solid blue;
}

<div class="card">
  <div class="content">
    Main Content
  </div>
  <div class="reference">
    Reference Content
  </div>
</div>

已针对最终解决方案进行了更新

body {
  background: rgb(0, 14, 32);
  color: white;
  font-size: 2em;
  display: table;
  width: 100%;
}

.card { /* Should be vertically centered in viewport*/
  height: calc(100vh);
  display: table-cell;
  vertical-align: middle;
  margin: auto;
}

.content { /* Should be left or center aligned in viewport*/
  text-align: left;
  border: solid white;
  margin: 0 1rem;
}

.reference { /* Should be right aligned and below .content <div> in viewport*/
  text-align: right;
  font-size: 0.5em;
  border: solid blue;
  margin: 0 1rem;
}

<div class="card">
  <div class="content">
    Main Content
  </div>
  <div class="reference">
    Reference Content
  </div>
</div>