Question

我想将第二行放置在容器的中心，但是我不知道该怎么做。 align-self仅在水平方向上起作用-即使flex-direction设置为“ column”。 jsfiddle

Answer 1

通常，您可以将类别为.second的元素的垂直边距设置为自动居中，但是类别为.first的元素会将居中的元素向下偏离中心。您可以通过在居中元素上设置transform: translateY(-50%)来解决此问题。

参见下文：

.second {
  align-self: center;
  background-color: purple;
  margin: auto 0;
  transform: translateY(-50%);
}

Answer 2

由于.first和.second的宽度设置为100％，因此很难看到实际发生的情况。如果将它们设置为50x50的正方形，则可以看到align-self在父容器的横轴上起作用，因此在这种情况下，它使.second在水平方向居中。

一种可行的解决方案是在.second内嵌套另一个flexbox，例如：https://jsfiddle.net/Lygdk4xo/

Answer 3

如果您不介意添加第三个空白div。您可以通过将justify-content设置为space-between来使第二个div居中。

详细信息如下： HTML

<div class="container">
  <div class="first">
    first
  </div>
  <div class="second">
    second
  </div>
  <div class="third">

  </div>
</div>

CSS

.first, .second, .third {
  height: 50px;
  width: 100%;
}
.container {
  background-color: silver;
  height: 300px;
  display: flex;
  flex-direction: column;
  flex-wrap: wrap;
  justify-content: space-between;
}

Flexbox-第二行垂直居中

3 个答案: