0

I am trying to get the logo in the centre of the page, but then I want the text to be in the middle (centre) of the logo and the bottom of the page. So it is in the centre of the centred logo and bottom of the page. So in effect, the logo is in the centre of the page, but the text is in the centre, between the logo and bottom of the page. Here is the JSFiddle that I made and below is the code. I can get everything centred but not the way I want where the logo is in the centre and the text is in the centre, between the logo and bottom of the page. 

/* FRONT PAGE LOADER */

.loader {
  position: fixed;
  left: 0px;
  top: 0px;
  width: 100%;
  height: 100%;
  z-index: 9999;
  background: white;
  text-align: center;
  display: -webkit-box;
  display: -moz-box;
  display: -ms-flexbox;
  display: -webkit-flex;
  display: flex;
  flex-direction: column;
}

.centered {
  align-self: center;
}

.center-center {
  align-self: center;
}

.loading-img {
  width: 80px;
  height: 80px;
  -webkit-animation: spin 2s linear infinite;
  animation: spin 2s linear infinite;
}


/*SPIN THE LOGO */

@-moz-keyframes spin {
  0% {
    -moz-transform: rotate(0deg);
  }
  100% {
    -moz-transform: rotate(360deg);
  }
}

@-o-keyframes spin {
  0% {
    -o-transform: rotate(0deg);
  }
  100% {
    -o-transform: rotate(360deg);
  }
}

@-webkit-keyframes spin {
  0% {
    -webkit-transform: rotate(0deg);
  }
  100% {
    -webkit-transform: rotate(360deg);
  }
}

@keyframes spin {
  0% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(360deg);
  }
}
<div class="loader">
  <div class="centered" id="blank2"><img class="img-responsive loading-img" src="https://upload.wikimedia.org/wikipedia/commons/d/d0/Newscycle-Circle.png" />
    <p id="blank3">LOADING</p>
  </div>
  <div class="center-center">
    <h3 id="blank1">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras et ultricies risus. Sed pulvinar leo non ligula luctus aliquet.</h3>
  </div>
</div>
Dino
  • 561
  • 3
  • 10
  • 21
  • Should the logo be vertically centered or just horizontally centered? – sol Jul 07 '17 at 09:15
  • Both, the logo must be in the centre of the screen, so in effect, it is the one that must be bang in the middle of the screen. Then the text should be below the logo but it must be centred between the logo and bottom of the screen. – Dino Jul 07 '17 at 09:50
  • Misunderstood you initially. Updated my answer – Asons Jul 07 '17 at 09:58

2 Answers2

2

For this to work you need to add these 2 lines to your .loader rule
(you also need to add their prefixed versions, which I didn't)

justify-content: center;
align-items: center;

Then you need to add a ghost element (I used the pseudo ::before) to balance the bottom text and give them both flex-grow: 1; flex-basis: 0; so they share the remaining space equal.

.loader::before,
.center-center {
  content: '\00a0';
  flex-grow: 1;
  flex-basis: 0;
  display: flex;
  align-items: center;
  justify-content: center;
}

And finally get rid of some of the margin's or else they will make it look like it doesn't work

.center-center h3 {
  margin: 0;
}
.centered p {
  margin-bottom: 0;
}


<!-- $(window).load(function () {
"use strict";

function loadingScreen() {
  $(".loader").fadeOut(2000);
}
(function() {
var counter = 3,
  h2 = document.getElementById("blank1"),
  spinningLogo = document.getElementById("blank2"),
  loadingText = document.getElementById("blank3");
setInterval(function() {
  counter -= 1;
  if (counter === 0) {
    clearInterval(counter);
    h2.innerHTML = "";
    spinningLogo.innerHTML = "";
    loadingText.innerHTML = "";
    loadingScreen();
  }
}, 1000);
}());
}); -->
/* FRONT PAGE LOADER */

.loader {
  position: fixed;
  left: 0px;
  top: 0px;
  width: 100%;
  height: 100%;
  z-index: 9999;
  background: white;
  text-align: center;
  display: -webkit-box;
  display: -moz-box;
  display: -ms-flexbox;
  display: -webkit-flex;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}

.loader::before,
.center-center {
  content: '';
  flex-grow: 1;
  flex-basis: 0;
  display: flex;
  align-items: center;
  justify-content: center;
}
.center-center h3 {
  margin: 0;
}
.centered p {
  margin-bottom: 0;
}

.loading-img {
  width: 80px;
  height: 80px;
  -webkit-animation: spin 2s linear infinite;
  animation: spin 2s linear infinite;
}

/*SPIN THE LOGO */
@-moz-keyframes spin {
  0% {
    -moz-transform: rotate(0deg);
  }
  100% {
    -moz-transform: rotate(360deg);
  }
}

@-o-keyframes spin {
  0% {
    -o-transform: rotate(0deg);
  }
  100% {
    -o-transform: rotate(360deg);
  }
}
@-webkit-keyframes spin {
  0% {
    -webkit-transform: rotate(0deg);
  }
  100% {
    -webkit-transform: rotate(360deg);
  }
}

@keyframes spin {
  0% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(360deg);
  }
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="loader">
  <div class="centered" id="blank2"><img class="img-responsive loading-img" src="https://upload.wikimedia.org/wikipedia/commons/d/d0/Newscycle-Circle.png" />
    <p id="blank3">LOADING</p>
  </div>
  <div class="center-center">
    <h3 id="blank1">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras et ultricies risus. Sed pulvinar leo non ligula luctus aliquet.</h3>
  </div>
</div>

One can also use transform: translate, instead of a pseudo, in combination with Flexbox

Note though, it can make the text and image to overlap on smaller (low) screens

<!-- $(window).load(function () {
"use strict";

function loadingScreen() {
  $(".loader").fadeOut(2000);
}
(function() {
var counter = 3,
  h2 = document.getElementById("blank1"),
  spinningLogo = document.getElementById("blank2"),
  loadingText = document.getElementById("blank3");
setInterval(function() {
  counter -= 1;
  if (counter === 0) {
    clearInterval(counter);
    h2.innerHTML = "";
    spinningLogo.innerHTML = "";
    loadingText.innerHTML = "";
    loadingScreen();
  }
}, 1000);
}());
}); -->
/* FRONT PAGE LOADER */

.loader {
  position: fixed;
  left: 0px;
  top: 0px;
  width: 100%;
  height: 100%;
  z-index: 9999;
  background: white;
  text-align: center;
  display: -webkit-box;
  display: -moz-box;
  display: -ms-flexbox;
  display: -webkit-flex;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}

.center-center {
  position: absolute;
  top: 75%;
  width: 100%;
  left: 0;
  transform: translateY(-50%);
  text-align: center;
}

.center-center h3 {
  margin: 0;
}
.centered p {
  margin-bottom: 0;
}

.loading-img {
  width: 80px;
  height: 80px;
  -webkit-animation: spin 2s linear infinite;
  animation: spin 2s linear infinite;
}

/*SPIN THE LOGO */
@-moz-keyframes spin {
  0% {
    -moz-transform: rotate(0deg);
  }
  100% {
    -moz-transform: rotate(360deg);
  }
}

@-o-keyframes spin {
  0% {
    -o-transform: rotate(0deg);
  }
  100% {
    -o-transform: rotate(360deg);
  }
}
@-webkit-keyframes spin {
  0% {
    -webkit-transform: rotate(0deg);
  }
  100% {
    -webkit-transform: rotate(360deg);
  }
}

@keyframes spin {
  0% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(360deg);
  }
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="loader">
  <div class="centered" id="blank2"><img class="img-responsive loading-img" src="https://upload.wikimedia.org/wikipedia/commons/d/d0/Newscycle-Circle.png" />
    <p id="blank3">LOADING</p>
  </div>
  <div class="center-center">
    <h3 id="blank1">Lorem ipsum dolor sit amet, consectetur adipiscing elit.</h3>
  </div>
</div>

One can also use transform: translate alone (it has slightly better browser support than Flexbox)

Note though, it can make the text and image to overlap on smaller (low) screens

<!-- $(window).load(function () {
"use strict";

function loadingScreen() {
  $(".loader").fadeOut(2000);
}
(function() {
var counter = 3,
  h2 = document.getElementById("blank1"),
  spinningLogo = document.getElementById("blank2"),
  loadingText = document.getElementById("blank3");
setInterval(function() {
  counter -= 1;
  if (counter === 0) {
    clearInterval(counter);
    h2.innerHTML = "";
    spinningLogo.innerHTML = "";
    loadingText.innerHTML = "";
    loadingScreen();
  }
}, 1000);
}());
}); -->
/* FRONT PAGE LOADER */

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

.centered {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

.center-center {
  position: absolute;
  top: 75%;
  width: 100%;
  left: 0;
  transform: translateY(-50%);
  text-align: center;
}

.center-center h3 {
  margin: 0;
}
.centered p {
  margin-bottom: 0;
}

.loading-img {
  width: 80px;
  height: 80px;
  -webkit-animation: spin 2s linear infinite;
  animation: spin 2s linear infinite;
}

/*SPIN THE LOGO */
@-moz-keyframes spin {
  0% {
    -moz-transform: rotate(0deg);
  }
  100% {
    -moz-transform: rotate(360deg);
  }
}

@-o-keyframes spin {
  0% {
    -o-transform: rotate(0deg);
  }
  100% {
    -o-transform: rotate(360deg);
  }
}
@-webkit-keyframes spin {
  0% {
    -webkit-transform: rotate(0deg);
  }
  100% {
    -webkit-transform: rotate(360deg);
  }
}

@keyframes spin {
  0% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(360deg);
  }
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="loader">
  <div class="centered" id="blank2"><img class="img-responsive loading-img" src="https://upload.wikimedia.org/wikipedia/commons/d/d0/Newscycle-Circle.png" />
    <p id="blank3">LOADING</p>
  </div>
  <div class="center-center">
    <h3 id="blank1">Lorem ipsum dolor sit amet, consectetur adipiscing elit.</h3>
  </div>
</div>
Asons
  • 84,923
  • 12
  • 110
  • 165
  • Thanks, @LGSon this works. It would be nice to see other people's answers too. I am sure that there is more than one way of doing this. – Dino Jul 07 '17 at 10:01
  • 1
    @Dino You can do this with `display: table`, with `transform: translate` (with or w/o Flexbox) ... though you asked for Flexbox :) – Asons Jul 07 '17 at 10:04
  • Will flexbox work with modern mobile/tablet browsers? – Dino Jul 07 '17 at 10:08
  • @Dino Yes it will. I also updated with a second sample, using `translate`. – Asons Jul 07 '17 at 10:10
  • @Dino I also added a 3rd version w/o Flexbox – Asons Jul 07 '17 at 10:16
  • Ah, I see what you mean about `transform: translate` I will consider if it should be used for better browser support. Thank You @LGSon. – Dino Jul 07 '17 at 10:27
0

Add display: flex to center-center and use flex properties to center the text in the remaining space:

/* FRONT PAGE LOADER */

.loader {
  position: fixed;
  left: 0px;
  top: 0px;
  width: 100%;
  height: 100%;
  z-index: 9999;
  background: white;
  text-align: center;
  display: -webkit-box;
  display: -moz-box;
  display: -ms-flexbox;
  display: -webkit-flex;
  display: flex;
  flex-direction: column;
}

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

.loading-img {
  width: 80px;
  height: 80px;
  -webkit-animation: spin 2s linear infinite;
  animation: spin 2s linear infinite;
}


/*SPIN THE LOGO */

@-moz-keyframes spin {
  0% {
    -moz-transform: rotate(0deg);
  }
  100% {
    -moz-transform: rotate(360deg);
  }
}

@-o-keyframes spin {
  0% {
    -o-transform: rotate(0deg);
  }
  100% {
    -o-transform: rotate(360deg);
  }
}

@-webkit-keyframes spin {
  0% {
    -webkit-transform: rotate(0deg);
  }
  100% {
    -webkit-transform: rotate(360deg);
  }
}

@keyframes spin {
  0% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(360deg);
  }
}
<div class="loader">
  <div class="centered" id="blank2"><img class="img-responsive loading-img" src="https://upload.wikimedia.org/wikipedia/commons/d/d0/Newscycle-Circle.png" />
    <p id="blank3">LOADING</p>
  </div>
  <div class="center-center">
    <h3 id="blank1">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras et ultricies risus. Sed pulvinar leo non ligula luctus aliquet.</h3>
  </div>
</div>
sol
  • 22,311
  • 6
  • 42
  • 59