Center Of The Center With Flexbox

October 02, 2024 Post a Comment

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 c

Solution 1:

For this to work you need to add these 2 lines to your .loader rule

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-centerh3 {
  margin: 0;
}
.centeredp {
  margin-bottom: 0;
}

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

functionloadingScreen() {
  $(".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-centerh3 {
  margin: 0;
}
.centeredp {
  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);
  }
}

<scriptsrc="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script><divclass="loader"><divclass="centered"id="blank2"><imgclass="img-responsive loading-img"src="https://upload.wikimedia.org/wikipedia/commons/d/d0/Newscycle-Circle.png" /><pid="blank3">LOADING</p></div><divclass="center-center"><h3id="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";

functionloadingScreen() {
  $(".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-centerh3 {
  margin: 0;
}
.centeredp {
  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);
  }
}

<scriptsrc="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script><divclass="loader"><divclass="centered"id="blank2"><imgclass="img-responsive loading-img"src="https://upload.wikimedia.org/wikipedia/commons/d/d0/Newscycle-Circle.png" /><pid="blank3">LOADING</p></div><divclass="center-center"><h3id="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";

functionloadingScreen() {
  $(".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-centerh3 {
  margin: 0;
}
.centeredp {
  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);
  }
}

<scriptsrc="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script><divclass="loader"><divclass="centered"id="blank2"><imgclass="img-responsive loading-img"src="https://upload.wikimedia.org/wikipedia/commons/d/d0/Newscycle-Circle.png" /><pid="blank3">LOADING</p></div><divclass="center-center"><h3id="blank1">Lorem ipsum dolor sit amet, consectetur adipiscing elit.</h3></div></div>

Solution 2:

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);
  }
}

<divclass="loader"><divclass="centered"id="blank2"><imgclass="img-responsive loading-img"src="https://upload.wikimedia.org/wikipedia/commons/d/d0/Newscycle-Circle.png" /><pid="blank3">LOADING</p></div><divclass="center-center"><h3id="blank1">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras et ultricies risus. Sed pulvinar leo non ligula luctus aliquet.</h3></div></div>

Html5 Guide

Center Of The Center With Flexbox

Solution 1:

Solution 2:

Post a Comment for "Center Of The Center With Flexbox"