列内容垂直对齐 - Bootstrap 4

Question

我正在尝试为用户提交表单时创建一个加载动画，然后通知他们是否成功或是否有错误。我的问题是加载图标和文本没有与其所在的 div 中心垂直对齐（col）。我希望将其放在中间，以便我可以在一段时间后用表单提交的响应替换列内容（加载图标和文本）。我正在使用 Bootstrap 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 {&nbsp; color: white;&nbsp; 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">&nbsp; &nbsp; <div class="row h-100" id="loadingIcon">&nbsp; &nbsp; &nbsp; &nbsp; <div class="m-auto col-11 col-md-6 d-flex flex-column justify-content-center align-items-center bg-primary h-75">&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <i class="fas fa-spinner fa-pulse fa-4x"></i>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <h2 class="pt-4">Loading</h2>&nbsp; &nbsp; &nbsp; &nbsp; </div>&nbsp; &nbsp; &nbsp; &nbsp; <div class="m-auto col-11 col-md-6 text-center bg-primary h-75 d-none">&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <!-- Column content to replace above column-->&nbsp; &nbsp; &nbsp; &nbsp; </div>&nbsp; &nbsp; </div></div>