Bootstrap 4在d-flex container-fluid中垂直居中一行答案

【问题标题】：Bootstrap 4 Vertically center a row within d-flex container-fluidBootstrap 4在d-flex container-fluid中垂直居中一行
【发布时间】：2017-09-22 23:59:28
【问题描述】：

我正在尝试使用 Bootstrap 4 实现一个看起来像这样的组件：

+-------------------------+
| Row 1 - Top             |
+-------------------------+
|                         |
|                         |
+-------------------------+
| Row 2 - Vertical Center |
+-------------------------+
|                         |
|                         |
|                         |
|                         |
+-------------------------+

容器的高度应该是 100vh。根据我的理解，使用 flex 将是解决这个问题的一种方法。

这是我目前拥有的标记：http://codeply.com/go/RRMwIHt8QA

如您所见，第 2 行似乎存在某种偏移。有什么想法导致此问题以及如何使该行占据可用空间的全部宽度？

【问题讨论】：

如果不被欺骗，相关 - stackoverflow.com/questions/36191516/…

标签： html css flexbox bootstrap-4

【解决方案1】：

要实现这一点，您首先需要将flex-column 添加到container，以便垂直添加row 的堆栈。

那么row 需要align-items-start align-content-start 来防止它们拉伸。

最后，使用伪::after，您可以匹配第一个row，这样第二个row 可以垂直居中。另一种方法是定位第一个 row 绝对值，但我发现伪版本响应更快。

Fiddle demo

堆栈sn-p

.test-container {
  height: 100vh;
}
.test-container .row:first-child,
.test-container::after {
  content: '';
  flex: 1 1 0;
}

/* styling for this demo */
.test-container .row > div {
  border: 1px dashed lightgray;
}

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta/css/bootstrap.min.css" rel="stylesheet"/>

<div class="d-flex flex-column container-fluid test-container">
  <div class="row align-items-start align-content-start">
    <div class="col-4">R1-C1</div>
    <div class="col-4">R1-C2</div>
    <div class="col-4">R1-C3</div>
  </div>

  <div class="row align-items-start align-content-start">
    <div class="col-4">R2-C1</div>
    <div class="col-4">R2-C2</div>
    <div class="col-4">R2-C3</div>
  </div>
</div>

【讨论】：

【解决方案2】：

d-flex 类会给你带来问题

删除它或检查 here 哪个更适合您的需求

【讨论】：