Dino Dino - 1 month ago 9
CSS Question

Center everything in the middle of div, with text on top and on bottom of image

I am trying to create a loading screen with a logo in the middle of the page. I have figured out the JS part but for the life of me, I can not centre the text on top and bottom of the image. Here is the JSFiddle and here is the code, what am I doing wrong. I have tried searching for an answer but all results that I tried never got my div to be centred with the text on top of the logo and on the bottom of the logo.



<-- $(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>




Answer Source

The default flex direction is row, which means that the items would be positioned horizontally. To position them vertically use 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>