为什么内容没有在中间对齐？答案

【问题标题】：Why is the Content not aligned in the middle?为什么内容没有在中间对齐？
【发布时间】：2017-07-20 14:41:56
【问题描述】：

随附的代码包含一个带有<p> 的动画 CSS 框。它正在工作，但问题是，为什么它没有垂直对齐？我将需要使用 flex 函数：“align-items = center”使其对齐。

.LoaderBox {
  width: 100%;
  border: 1px solid rgba(255, 0, 0, 1.00);
  display: flex;
  justify-content: center;
}

.LoaderBox>p {
  color: rgba(106, 106, 106, 1.00);
  font-size: 15px;
  margin-left: 20px;
  display: block;
}

.LoaderBox_spinner {
  width: 20px;
  height: 20px;
  background-color: #333;
  -webkit-animation: sk-rotateplane 1.2s infinite ease-in-out;
  animation: sk-rotateplane 1.2s infinite ease-in-out;
  display: block;
}

@-webkit-keyframes sk-rotateplane {
  0% {
    -webkit-transform: perspective(120px)
  }
  50% {
    -webkit-transform: perspective(120px) rotateY(180deg)
  }
  100% {
    -webkit-transform: perspective(120px) rotateY(180deg) rotateX(180deg)
  }
}

@keyframes sk-rotateplane {
  0% {
    transform: perspective(120px) rotateX(0deg) rotateY(0deg);
    -webkit-transform: perspective(120px) rotateX(0deg) rotateY(0deg)
  }
  50% {
    transform: perspective(120px) rotateX(-180.1deg) rotateY(0deg);
    -webkit-transform: perspective(120px) rotateX(-180.1deg) rotateY(0deg)
  }
  100% {
    transform: perspective(120px) rotateX(-180deg) rotateY(-179.9deg);
    -webkit-transform: perspective(120px) rotateX(-180deg) rotateY(-179.9deg);
  }
}

<div class="LoaderBox">
  <div class="LoaderBox_spinner"></div>
  <p>Verifying</p>
</div>

【问题讨论】：

align-items 的默认值是stretch，这意味着元素将占据 flex 容器的整个高度。在这里，您手动设置了微调器的height，因此stretch 被覆盖，它的行为似乎类似于flex-start。最好的解决方案是使用align-items: center 来解决这个问题。
我还是不明白背后的原因。 “box”和“
”似乎都不是相同的对齐方式。看一下“

”，它应该在

的顶部，但是它的垂直对齐...那为什么会这样呢？这就是我不明白的原因。

标签： html css flexbox css-animations

【解决方案1】：

只需将align-items: center 添加到您的弹性容器.LoaderBox。

默认情况下，所有项目都被拉伸 (align-items: stretch)。

p 默认具有相等的垂直边距（margin-top 和 margin-bottom），而 div 没有。所以在这种情况下，p 决定了 flex-container 的高度。而且看起来也是垂直居中的。

演示：

.LoaderBox {
  width: 100%;
  border: 1px solid rgba(255, 0, 0, 1.00);
  display: flex;
  align-items: center; /* new */
  justify-content: center;
}

.LoaderBox>p {
  color: rgba(106, 106, 106, 1.00);
  font-size: 15px;
  margin-left: 20px;
  display: block;
}

.LoaderBox_spinner {
  width: 20px;
  height: 20px;
  background-color: #333;
  -webkit-animation: sk-rotateplane 1.2s infinite ease-in-out;
  animation: sk-rotateplane 1.2s infinite ease-in-out;
  display: block;
}

@-webkit-keyframes sk-rotateplane {
  0% {
    -webkit-transform: perspective(120px)
  }
  50% {
    -webkit-transform: perspective(120px) rotateY(180deg)
  }
  100% {
    -webkit-transform: perspective(120px) rotateY(180deg) rotateX(180deg)
  }
}

@keyframes sk-rotateplane {
  0% {
    transform: perspective(120px) rotateX(0deg) rotateY(0deg);
    -webkit-transform: perspective(120px) rotateX(0deg) rotateY(0deg)
  }
  50% {
    transform: perspective(120px) rotateX(-180.1deg) rotateY(0deg);
    -webkit-transform: perspective(120px) rotateX(-180.1deg) rotateY(0deg)
  }
  100% {
    transform: perspective(120px) rotateX(-180deg) rotateY(-179.9deg);
    -webkit-transform: perspective(120px) rotateX(-180deg) rotateY(-179.9deg);
  }
}

<div class="LoaderBox">
  <div class="LoaderBox_spinner"></div>
  <p>Verifying</p>
</div>

【讨论】：

嗨瓦迪姆，感谢您的建议。我已经知道如何使它垂直对齐。但我不明白为什么
默认情况下不需要垂直对齐并且它看起来是垂直对齐的。如果默认情况下“align-items”被拉伸，那么

应该出现在

....不是它..？的顶部
@BSS p 默认有垂直的margins（top 和bottom），而div 没有。所以在这种情况下p 看起来更高。
@BSS 如果适合您的需要，请您接受答案，如果您需要其他内容，请发表评论？
根据你说的，我想我明白了，现在得到答案了。所以我做了一点验证。如果
具有使其垂直对齐的默认上下边距，则通过将相同的内容应用于微调框，微调框也应该垂直对齐。因此，我为微调框添加了 top-margin:auto、bottom-margin:auto。它工作.!!!!!!!!!!!!!!!感谢您的帮助。
@BSS 这取决于你，但我建议为 flex-container 设置 align-items，而不是为每个要居中的弹性项目添加 margin-top: auto 和 margin-bottom: auto。我认为这看起来会更清晰，并且更易于维护和灵活。还可以选择使用align-self: center，这也更具描述性。

【解决方案2】：

.LoaderBox {
    width: 100%;
    border: 1px solid rgba(255, 0, 0, 1.00);
    display: flex;
    justify-content: center;
	padding:20px;
	box-sizing:border-box;
  }
  
  .LoaderBox>p {
    color: rgba(106, 106, 106, 1.00);
    font-size: 15px;
    display: block;
	padding:0px;
	margin:0px;
	margin-left:20px;
  }
  
  .LoaderBox_spinner {
    width: 20px;
    height: 20px;
    background-color: #333;
    -webkit-animation: sk-rotateplane 1.2s infinite ease-in-out;
    animation: sk-rotateplane 1.2s infinite ease-in-out;
    display: block;
	float:left;
  }
  
  @-webkit-keyframes sk-rotateplane {
    0% {
      -webkit-transform: perspective(120px)
    }
    50% {
      -webkit-transform: perspective(120px) rotateY(180deg)
    }
    100% {
      -webkit-transform: perspective(120px) rotateY(180deg) rotateX(180deg)
    }
  }
  
  @keyframes sk-rotateplane {
    0% {
      transform: perspective(120px) rotateX(0deg) rotateY(0deg);
      -webkit-transform: perspective(120px) rotateX(0deg) rotateY(0deg)
    }
    50% {
      transform: perspective(120px) rotateX(-180.1deg) rotateY(0deg);
      -webkit-transform: perspective(120px) rotateX(-180.1deg) rotateY(0deg)
    }
    100% {
      transform: perspective(120px) rotateX(-180deg) rotateY(-179.9deg);
      -webkit-transform: perspective(120px) rotateX(-180deg) rotateY(-179.9deg);
    }
  }
  
  p{ float:left;}

<div class="LoaderBox">
    <div class="LoaderBox_spinner"></div>
    <p>Verifying</p>

  </div>

【讨论】：

我不认为这是我正在寻找的答案。我已经得到了如何解决我的问题的答案。我想了解的是为什么
似乎与“align-items:center”垂直对齐。但是对于微调框，它需要有“align-items:center”。谢谢。