Center of the center with Flexbox [duplicate]

问题

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>

回答1:

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>

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

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

来源：https://stackoverflow.com/questions/44966646/center-of-the-center-with-flexbox

标签

html

css

flexbox