html - 垂直对齐 6 个 div 内容

Question

我将如何以 3x3 模式垂直对齐所有这 6 个 div，以便顶部和底部 div 内容彼此对齐，从而看起来不错。我试过一些 vertical-align: middle;没有成功。

必须 100% 响应，并且数字也居中对齐，因此无论到达那里的数字都是对齐的。

.top-right-container {
 position: absolute;
 border: 1px solid white;
 height: 20%;
 width: 50%;
 right: 0;
 top: 0;
}

.stats-container {
 position: relative;
 float: left;
 border: 1px solid white;
 width: 75%;
 height: 80%;
}

.Agility,
.Stamina,
.Respect,
.Intelligence,
.Strength,
.Cash {
 display: inline-block;
 color: black;
}

.Agility,
.Intelligence {
 float: left;
 margin-left: 10%;
}

.Stamina,
.Strength {
 margin: 0 auto;
}

.Respect,
.Cash {
 margin-right: 10%;
 float: right;
}

.stats-container h2 {
 font-family: Marker-Felt;
 margin: 0;
 font-size: calc(0.7vh + 1.2vw);
}

.stats-container p {
 margin: 5%;
 text-align: center;
 font-size: calc(0.5vh + 0.8vw);
}

.top-stats,
.bottom-stats {
 width: 100%;
 text-align: center;
}

<div class="top-right-container">
      <div class="stats-container">
        <div class="top-stats">
        <div class="Agility">
          <h2>Agility</h2>
          <p>10</p>
        </div>
        <div class="Stamina">
          <h2>Stamina</h2>
          <p>10</p>
        </div>
        <div class="Respect">
          <h2>Respect</h2>
          <p>10</p>
        </div>
        </div>
        <div class="bottom-stats">
        <div class="Intelligence">
          <h2>Intelligence</h2>
          <p>10</p>
        </div>
        <div class="Strength">
          <h2>Strength</h2>
          <p>10</p>
        </div>
        <div class="Cash">
          <h2>Cash</h2>
          <p>10</p>
        </div>
        </div>
      </div>
    </div>

Answer 1

你可以用 Flexbox 来做到这一点:

* {margin:0;padding:0;box-sizing:border-box}
html, body {width:100%}

.stats-container {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  height: 100vh;
}

.top-stats,
.bottom-stats {
  display: flex;
  width: 100%;
  text-align: center;
}

.Agility,
.Stamina,
.Respect,
.Intelligence,
.Strength,
.Cash {
  flex: 1;
}

.stats-container h2 {
  font-size: calc(0.7vh + 1.2vw);
}

.stats-container p {
  font-size: calc(0.5vh + 0.8vw);
}

<div class="top-right-container">
  <div class="stats-container">
    <div class="top-stats">
      <div class="Agility">
        <h2>Agility</h2>
        <p>10</p>
      </div>
      <div class="Stamina">
        <h2>Stamina</h2>
        <p>10</p>
      </div>
      <div class="Respect">
        <h2>Respect</h2>
        <p>10</p>
      </div>
    </div>
    <div class="bottom-stats">
      <div class="Intelligence">
        <h2>Intelligence</h2>
        <p>10</p>
      </div>
      <div class="Strength">
        <h2>Strength</h2>
        <p>10</p>
      </div>
      <div class="Cash">
        <h2>Cash</h2>
        <p>10</p>
      </div>
    </div>
  </div>
</div>