Flexbox

Question

我想将第二行放在容器的中央，但我不知道该怎么做。 align-self 仅适用于水平方向 - 即使 flex-direction 设置为“列”。

.first, .second {
  height: 50px;
  width: 100%;
}

.first {
  background-color: wheat;
}

.second {
  align-self: center;
  background-color: purple;
}

.container {
  background-color: silver;
  height: 300px;
  display: flex;
  flex-direction: column;
  flex-wrap: wrap;
}

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

Answer 1

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

.first,
.second {
  height: 50px;
  width: 100%;
}

.first {
  background-color: wheat;
}

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

.container {
  background-color: silver;
  height: 300px;
  display: flex;
  flex-direction: column;
  flex-wrap: wrap;
}

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

Answer 2

很难看出实际发生了什么，因为 .first 和 .second 的宽度设置为 100%。如果将它们设为 50x50 正方形，您可以看到 align-self 在父容器的横轴上工作，因此在本例中它使 .second 水平居中。

一个可行的解决方案是在 .second 中嵌套另一个 flexbox，如下所示：https://jsfiddle.net/Lygdk4xo/

Answer 3

如果您不介意，请添加第三个空格 div。您可以通过将 justify-content 设置为 space-between.

来使第二个 div 居中

.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;
}

.second {
  align-self: center;
  background-color: purple;
}

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

  <div class="second">
    second
  </div>

  <div class="third">
  </div>
</div>

Flexbox - 第二行垂直居中

Flexbox - center vertically second row

css

vertical-alignment

centering