中心与Flexbox的中心 [英] Center of the center with Flexbox

查看：117
本文介绍了中心与Flexbox的中心的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！

问题描述

我试图将徽标放在页面的中心，但是我希望文本位于徽标的中间（中心）和页面的底部。所以它位于中心徽标和页面底部的中心。因此，实际上，徽标位于页面的中心，但文本位于徽标和页面底部之间的中心位置。这里是我所做的 JSFiddle ，下面是代码。我可以让一切都居中，但不是我想要的标志位于中心位置，而文字位于标志和页面底部之间的中心位置。

/ * FRONT PAGE LOADER * /。loader {position：fixed; left：0px;顶部：0px;宽度：100％;身高：100％ z-index：9999;背景：白色; text-align：center;显示：-webkit-box;显示：-moz-box;显示：-ms-flexbox;显示：-webkit-flex;显示：flex; flex-direction：column;}。centered {align-self：center;}。center-center {align-self：center;}。loading-img {width：80px;身高：80px; -webkit-animation：旋转2s线性无限;动画：旋转2s线性无限;} / *旋转LOGO * / @ - moz-keyframes旋转{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）; }} @关键帧自旋{0％{transform：rotate（0deg）; } 100％{transform：rotate（360deg）; } 

 < div class =loader> < div class =centeredid =blank2>< img class =img-responsive loading-imgsrc =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>

解决方案

为此，您需要将这两行添加到 .loader 规则

（您还需要添加他们的前缀版本，我没有） 

  justify-content：center; 
 align-items：center;

然后您需要添加一个 ghost 元素（我使用伪 :: before ）来平衡底部文本并给它们 flex-grow：1; flex-basis：0; 所以它们共享剩下的空间相同。

  .loader :: before ，
 .center-center {
 content：'\00a0'; 
 flex-grow：1; 
 flex-basis：0; 
 display：flex; 
 align-items：center; 
 justify-content：center; 
 
 $ / code $ 
 
 
 
最后摆脱一些保证金，否则他们会让它看起来像它不工作
  .center-center h3 {
 margin：0; 
} 
 .centered p {
 margin-bottom：0; 
 
 
 
 $ b 
 
 
 
 <$ （）;函数（）;函数（）函数（）函数（） counter = 3，h2 = document.getElementById（blank1），spinningLogo = document.getElementById（blank2），loadingText = document.getElementById（blank3）; setInterval（function（）{counter  -  = 1; if计数器=== 0）{clearInterval（counter）; h2.innerHTML =; spinningLogo.innerHTML =; loadingText.innerHTML =; loadingScreen（）;}}，1000）;}（））;}） ; - >  
 
  / * FRONT PAGE LOADER * / loader {position：fixed; left：0px;顶部：0px;宽度：100％;身高：100％ z-index：9999;背景：白色; text-align：center;显示：-webkit-box;显示：-moz-box;显示：-ms-flexbox;显示：-webkit-flex;显示：flex; flex-direction：column; justify-content：center; align-items：center;} loader :: before，.center-center {content：''; flex-grow：1; flex-basis：0;显示：flex; align-items：center; justify-content：center;}。center-center h3 {margin：0;}。centered p {margin-bottom：0;}。loading-img {width：80px;身高：80px; -webkit-animation：旋转2s线性无限;动画：旋转2s线性无限;} / *旋转LOGO * / @  -  moz-keyframes旋转{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）; }} @关键帧自旋{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 =centeredid =blank2>< img class =img-responsive loading-imgsrc =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>


$ b $ hr b

也可以使用 transform：translate ，而不是伪命令与Flexbox结合使用
注意，尽管它可以使文本和图像重叠在较小的屏幕上。

data-lang =jsdata-hide =falsedata-console =truedata-babel =false> 

 <！ -  $（window）.load（function（）{use strict; function loadingScreen（）{$（。loader）。fadeOut ）; 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;顶部：0px;宽度：100％;身高：100％ z-index：9999;背景：白色; text-align：center;显示：-webkit-box;显示：-moz-box;显示：-ms-flexbox;显示：-webkit-flex;显示：flex; flex-direction：column; justify-content：center; align-items：center;}。center-center {position：absolute;顶部：75％;宽度：100％;左：0; transform：translateY（-50％）;中心h3 {margin：0;}。居中p {margin-bottom：0;}。loading-img {width：80px;身高：80px; -webkit-animation：旋转2s线性无限;动画：旋转2s线性无限;} / *旋转LOGO * / @ - moz-keyframes旋转{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）; }} @关键帧自旋{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 =centeredid =blank2>< img class =img-responsive loading-imgsrc =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>


$ b $ hr b

也可以单独使用 transform：translate （它比Flexbox有更好的浏览器支持）

请注意，它可以使文本和图像在较小的屏幕上重叠 data-lang =jsdata-hide =falsedata-console =truedata-babel =false>

/ * FRONT PAGE LOADER * / loader {position：fixed; left：0px;顶部：0px;宽度：100％;身高：100％ z-index：9999;背景：白色; text-align：center;}。centered {position：absolute;顶部：50％;剩下：50％; transform：translate（-50％，-50％）;}。center-center {position：absolute;顶部：75％;宽度：100％;左：0; transform：translateY（-50％）;中心h3 {margin：0;}。居中p {margin-bottom：0;}。loading-img {width：80px;身高：80px; -webkit-animation：旋转2s线性无限;动画：旋转2s线性无限;} / *旋转LOGO * / @ - moz-keyframes旋转{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）; }} @关键帧自旋{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 =centeredid =blank2>< img class =img-responsive loading-imgsrc =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>

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>

解决方案

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>

这篇关于中心与Flexbox的中心的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！

查看全文
相关文章
前端开发最新文章
热门教程
热门工具
登录 关闭
扫码关注1秒登录
发送“验证码”获取 | 15天全站免登陆