列内容垂直对齐-引导带4

Question

我正在尝试创建一个加载动画，以便用户在通知表单是否成功或存在错误之前提交表单。我的问题是加载图标和文本没有垂直对齐它所在的div的中心。我希望把它放在中间，这样我就可以在一段时间后用表单提交的响应替换列内容(加载图标和文本)。我正在使用引导程序4，并且在列中尝试了各种不同的代码，如align-items-center和my-auto，但都没有效果。

<div class="container-fluid h-100 w-100 formSubmitLoad d-flex flex-column" id="loader">
    <div class="row justify-content-center align-items-center h-100" id="loadingIcon">
        <div class="col-11 col-md-6 text-center bg-primary h-75">
            <i class="fas fa-spinner fa-pulse fa-4x"></i>
            <h2 class="pt-4">Loading</h2>
        </div>

        <div class="col-11 col-md-6 text-center bg-primary h-75 d-none">
            <!-- Column content to replace above column-->
        </div>
    </div>
</div>

.formSubmitLoad {
  position: fixed;
  z-index: 1;
  left: 0;
  top: 0;
  overflow: auto;
  color: white;
  background-color: rgb(0, 0, 0);
  background-color: rgba(0, 0, 0, 0.9);
}

片段：

​

Answer 1

更新代码如下：

​

.formSubmitLoad {
  color: white;
  background-color: rgba(0, 0, 0, 0.9);
}

<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" rel="stylesheet" >
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.12.0/css/all.css">
<div class="container-fluid h-100 w-100 formSubmitLoad position-fixed" id="loader">
    <div class="row h-100" id="loadingIcon">
        <div class="m-auto col-11 col-md-6 d-flex flex-column justify-content-center align-items-center bg-primary h-75">
            <i class="fas fa-spinner fa-pulse fa-4x"></i>
            <h2 class="pt-4">Loading</h2>
        </div>

        <div class="m-auto col-11 col-md-6 text-center bg-primary h-75 d-none">
            <!-- Column content to replace above column-->
        </div>
    </div>
</div>

​