使用CSS Grid时没有固定高度的Bootstrap 4 div（使用btn类）中的垂直对齐文本（并且没有flexbox）

Question

我有一个带有Bootstrap 4 div的CSS Grid，里面有btn标签。 div垂直扩展（拉伸）。我只需要在中间垂直对齐文本。

我知道我可以使用flexbox，但在这个项目中我不能。

这是一个例子：https://jsfiddle.net/fredhors/0sw2uLay/5/

.grid-wrapper {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(20vmax, 1fr));
  grid-gap: 0.5rem;
  height: 100vh;
}

<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.3.1/css/bootstrap.min.css" rel="stylesheet"/>
<div class="grid-wrapper">
  <div class="btn btn-primary">Content A</div>
  <div class="btn btn-warning">Content B</div>
  <div class="btn btn-danger">Content C</div>
  <div class="btn btn-success">Content D</div>
</div>

Answer 1

如果你必须集中整个qazxsw poi，只需在qazxsw poi上使用qazxsw poi - 请参阅下面的演示：

btn

align-items: center

如果你想要背景拉伸并具有垂直对齐，如果你应该使用flexbox for grid-wrapper它会更容易 - 见下面的演示：

.grid-wrapper {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(20vmax, 1fr));
  grid-gap: 0.5rem;
  height: 100vh;
  align-items: center; /* center vertically */
}

<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.3.1/css/bootstrap.min.css" rel="stylesheet"/>
<div class="grid-wrapper">
  <div class="btn btn-primary">Content A</div>
  <div class="btn btn-warning">Content B</div>
  <div class="btn btn-danger">Content C</div>
  <div class="btn btn-success">Content D</div>
</div>

---

我知道我可以使用flexbox，但在这个项目中我不能。

如果您不能使用flexbox，则可以使用将元素置于网格项中心的伪元素 - 请参阅下面的演示：

btn

.grid-wrapper {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(20vmax, 1fr));
  grid-gap: 0.5rem;
  height: 100vh;
}

.grid-wrapper > .btn {
  display: flex;
  align-items: center;
}