无法使用弹性框垂直居中项目

Question

我正在尝试使用此处描述的flexbox水平和垂直居中（单击"水平和垂直"=>然后单击"您可以使用flexbox吗？

.parent_test {
  display: flex;
  justify-content: center;
  align-items: center;
}
.sk-double-bounce {
  width: 40px;
  height: 40px;
  position: relative;
}
.sk-double-bounce .sk-child {
    width: 100%;
    height: 100%;
    border-radius: 20%;
    background-color: green;
    position: absolute;
    top: 0;
    left: 0;
    -webkit-animation: sk-doubleBounce 2s infinite ease-in-out;
            animation: sk-doubleBounce 2s infinite ease-in-out; }
  .sk-double-bounce .sk-double-bounce2 {
    -webkit-animation-delay: -1.0s;
            animation-delay: -1.0s; }
@-webkit-keyframes sk-doubleBounce {
  0%, 100% {
    -webkit-transform: scale(0);
            transform: scale(0); }
  50% {
    -webkit-transform: scale(1);
            transform: scale(1); } }
@keyframes sk-doubleBounce {
  0%, 100% {
    -webkit-transform: scale(0);
            transform: scale(0); }
  50% {
    -webkit-transform: scale(1);
            transform: scale(1); } }

  <h1><a href="https://css-tricks.com/centering-css-complete-guide/#both-flexbox">centering-css-complete-guide/#both-flexbox</a>
  <div class="parent_test">
      <div class="sk-double-bounce">
        <div class="sk-child sk-double-bounce1"></div>
        <div class="sk-child sk-double-bounce2"></div>
      </div>
  </div>

但是为什么它不垂直居中呢？JSBin

Answer 1

您需要

为父级指定一个height，以使其垂直对齐。

body {
  margin: 0
}
.parent_test {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100vh
}
.sk-double-bounce {
  width: 40px;
  height: 40px;
  position: relative;
}
.sk-double-bounce .sk-child {
  width: 100%;
  height: 100%;
  border-radius: 20%;
  background-color: green;
  position: absolute;
  top: 0;
  left: 0;
  -webkit-animation: sk-doubleBounce 2s infinite ease-in-out;
  animation: sk-doubleBounce 2s infinite ease-in-out;
}
.sk-double-bounce .sk-double-bounce2 {
  -webkit-animation-delay: -1.0s;
  animation-delay: -1.0s;
}
@-webkit-keyframes sk-doubleBounce {
  0%, 100% {
    -webkit-transform: scale(0);
    transform: scale(0);
  }
  50% {
    -webkit-transform: scale(1);
    transform: scale(1);
  }
}
@keyframes sk-doubleBounce {
  0%, 100% {
    -webkit-transform: scale(0);
    transform: scale(0);
  }
  50% {
    -webkit-transform: scale(1);
    transform: scale(1);
  }
}

<div class="parent_test">
  <div class="sk-double-bounce">
    <div class="sk-child sk-double-bounce1"></div>
    <div class="sk-child sk-double-bounce2"></div>
  </div>
</div>

Answer 2

如果您检查输出，您将看到.sk-double-bounce实际上在.parent_test内居中。问题是.parent_test的身高要小得多。（它只需要其内容所需的高度量加上填充和边框值）。

您现在可以了解为什么 @dippas 的解决方案有效。如果需要，您可以删除.parent_test包装器，将弹性规则放入body，将body的高度设置为100vh .sk-double-bounce然后将div 直接放入体内。那将做同样的工作。