html - 将所有内容居中于div的中间，在图像的顶部和底部放置文本

我正在尝试创建一个在页面中间带有徽标的加载屏幕。我已经弄清楚了JS部分，但是为了我的生命，我无法将文本居中放置在图像的顶部和底部。这是JSFiddle，这是代码，我在做什么错。我尝试搜索答案，但是所有尝试的结果都没有使div以徽标顶部和徽标底部的文本为中心。

<-- $(window).load(function() {
  "use strict";
  $(".loader").fadeOut(3000).delay(3000);
}); -->

.loader {
  position: fixed;
  left: 0px;
  top: 0px;
  width: 100%;
  height: 100%;
  z-index: 9999;
  background: white;
}

.loader img {
  width: 20%;
  height: auto;
}

.centered-loader {
  display: flex;
  align-items: center;
  justify-content: center;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="loader centered-loader">
  <p>Loading...</p>
  <img class="img-responsive pulsate" src="http://lorempixel.com/400/400/cats/" alt="Logo" />
  <p>This text needs to be below the logo.</p>
</div>

最佳答案

默认的flex direction是row，这意味着这些项目将水平放置。要垂直放置它们，请使用flex-direction: column：

<-- $(window).load(function() {
  "use strict";
  $(".loader").fadeOut(3000).delay(3000);
}); -->

.loader {
  position: fixed;
  left: 0px;
  top: 0px;
  width: 100%;
  height: 100%;
  z-index: 9999;
  background: white;
}

.loader img {
  width: 20%;
  height: auto;
}

.centered-loader {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="loader centered-loader">
  <p>Loading...</p>
  <img class="img-responsive pulsate" src="http://lorempixel.com/400/400/cats/" alt="Logo" />
  <p>This text needs to be below the logo.</p>
</div>