css - 保持第一个元素垂直居中，下一个元素在下面

Question

我有三个元素当前通过 flex 在容器中垂直居中:

<div class="parent">
    <div class="first">A</div>
    <div class="second">B</div>
    <div class="third">C</div>
</div>

使用 CSS:

.parent {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    height: 800px;
}

看起来像:

我想更改它，使第一个元素垂直居中，其他元素跟随:

理想情况下，这可以简单地通过 flex 完成，但到目前为止我找不到解决方案。非常感谢任何帮助。

Answer 1

如果您的元素有固定大小，您可以使用包装 div 来实现哪个大小与第一个元素相同，让后面的元素溢出。

.parent {
  height: 125px;
  background-color: palegreen;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}

.item-container,
.item {
  width: 200px;
  height: 30px;
}

.item {
  display: flex;
  justify-content: center;
  align-items: center;
  border: 1px solid red;
}

.second {
 height: 50px;
}

<div class="parent">
  <div class="item-container">
    <div class="item first">A</div>
    <div class="item second">B</div>
    <div class="item third">C</div>
  </div>
</div>