视口居中 <div> 对齐

Question

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

换句话说，我想让 .reference class 在 .content class 的右下方对齐，并且两个元素在视口中垂直居中.

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>

Answer 1

要达到预期效果，请使用以下内容
HTML:

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

CSS:

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

}

.card {
  height: calc(100vh);
 display: table-cell;
 vertical-align: middle;
  margin: auto;


}

.content {
  text-align: left;   
  border: solid white;

}

.reference {
  text-align: right;
  font-size: 0.5em;
  border: solid blue;

}

Codepen- https://codepen.io/nagasai/pen/qmVKjB

视口居中 <div> 对齐

Viewport Centered <div> Alignment

html

css

viewport

vertical-alignment

viewport-units