垂直居中一个 flex 项目，其父项是 flex-column

Question

我无法让我的弹性项目在其剩余空间中垂直对齐。

这是我目前拥有的：

<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3" crossorigin="anonymous">


<div class="parent d-flex flex-column py-2">

  <div class="container p-0 flex-grow-1">
    <div class="mb-1 d-flex justify-content-center">
      <img src="https://dummyimage.com/300x200/000/fff"></img>
      <!-- need to vertically center this image -->
    </div>
  </div>
  <div class="container p-0 flex-grow-1">
    <div class="mb-1 d-flex justify-content-center">
      Suspendisse non nisl sit amet velit hendrerit rutrum. Vestibulum fringilla pede sit amet augue. Praesent nec nisl a purus blandit viverra. Sed magna purus, fermentum eu, tincidunt eu, varius ut, felis. Proin viverra, ligula sit amet ultrices semper, ligula
      arcu tristique sapien, a accumsan nisi mauris ac eros. Pellentesque libero tortor, tincidunt et, tincidunt eget, semper nec, quam. Aenean imperdiet. Maecenas nec odio et ante tincidunt tempus. Praesent nonummy mi in odio. Nulla consequat massa quis
      enim. Morbi mollis tellus ac sapien. In turpis. Curabitur suscipit suscipit tellus. Cras id dui. Mauris turpis nunc, blandit et, volutpat molestie, porta ut, ligula. Curabitur suscipit suscipit tellus. Nullam nulla eros, ultricies sit amet, nonummy
      id, imperdiet feugiat, pede. Aenean viverra rhoncus pede. Maecenas nec odio et ante tincidunt tempus. Vivamus consectetuer hendrerit lacus.
    </div>
  </div>

</div>

我正在尝试将图像在其容器中垂直居中，但它不起作用。 我尝试使用 align-items-center、align-self-center 甚至 justify-content-center 可能是因为它是列方向，在多个地方，但不起作用。图像始终显示在容器的顶部。

Answer 1

更新：

我没有注意到您在示例中提到了您的代码，它只是内容的一部分并用作页面的右侧。 关于这一点，我已经模拟了 .parent 块的高度来拉伸它。

关键是，BS5 .container 不能自行伸缩。你必须添加 .d-flex class of display: flex;属性 以弹性方式处理它，请参阅代码 cmets 了解更多详细信息。

/* simulate parent height */
.parent {
  min-height: 1000px;
}

/* show containers' area */
.container {
  border: 1px solid;
}

/* code for Option-2 */
/* :first-of-type - will be applied only for first .container */
.parent.parent--tmp > .container:first-of-type {
  display: flex;
  align-items: center;
  justify-content: center;
}

<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3" crossorigin="anonymous">


<!-- Option-1: changing markup -->
<div class="parent d-flex flex-column py-2">
  <!-- 
    update container class list 
    add "d-flex align-items-center justify-content-center"
  -->
  <div class="container p-0 flex-grow-1 d-flex align-items-center justify-content-center">
    <div class="mb-1 d-flex justify-content-center">
      <!-- adjust closing tag for image -->
      <img src="https://dummyimage.com/300x200/000/fff" />
      <!-- need to vertically center this image -->
    </div>
  </div>
  <div class="container p-0 flex-grow-1">
    <div class="mb-1 d-flex justify-content-center">
      <p>
        Suspendisse non nisl sit amet velit hendrerit rutrum. Vestibulum fringilla pede sit amet augue. Praesent nec nisl a purus blandit viverra. Sed magna purus, fermentum eu, tincidunt eu, varius ut, felis. Proin viverra, ligula sit amet ultrices semper, ligula
        arcu tristique sapien, a accumsan nisi mauris ac eros. Pellentesque libero tortor, tincidunt et, tincidunt eget, semper nec, quam. Aenean imperdiet. Maecenas nec odio et ante tincidunt tempus. Praesent nonummy mi in odio. Nulla consequat massa
        quis enim. Morbi mollis tellus ac sapien. In turpis. Curabitur suscipit suscipit tellus. Cras id dui. Mauris turpis nunc, blandit et, volutpat molestie, porta ut, ligula. Curabitur suscipit suscipit tellus. Nullam nulla eros, ultricies sit amet,
        nonummy id, imperdiet feugiat, pede. Aenean viverra rhoncus pede. Maecenas nec odio et ante tincidunt tempus. Vivamus consectetuer hendrerit lacus.
      </p>
    </div>
  </div>
</div>


<!-- Option-2: update only by CSS rule -->
<!-- added "parent--tmp" just for example purposes -->
<div class="parent parent--tmp d-flex flex-column py-2">
  <div class="container p-0 flex-grow-1">
    <div class="mb-1 d-flex justify-content-center">
      <!-- adjust closing tag for image -->
      <img src="https://dummyimage.com/300x200/000/fff" />
      <!-- need to vertically center this image -->
    </div>
  </div>
  <div class="container p-0 flex-grow-1">
    <div class="mb-1 d-flex justify-content-center">
      <p>
        Suspendisse non nisl sit amet velit hendrerit rutrum. Vestibulum fringilla pede sit amet augue. Praesent nec nisl a purus blandit viverra. Sed magna purus, fermentum eu, tincidunt eu, varius ut, felis. Proin viverra, ligula sit amet ultrices semper, ligula
        arcu tristique sapien, a accumsan nisi mauris ac eros. Pellentesque libero tortor, tincidunt et, tincidunt eget, semper nec, quam. Aenean imperdiet. Maecenas nec odio et ante tincidunt tempus. Praesent nonummy mi in odio. Nulla consequat massa
        quis enim. Morbi mollis tellus ac sapien. In turpis. Curabitur suscipit suscipit tellus. Cras id dui. Mauris turpis nunc, blandit et, volutpat molestie, porta ut, ligula. Curabitur suscipit suscipit tellus. Nullam nulla eros, ultricies sit amet,
        nonummy id, imperdiet feugiat, pede. Aenean viverra rhoncus pede. Maecenas nec odio et ante tincidunt tempus. Vivamus consectetuer hendrerit lacus.
      </p>
    </div>
  </div>

</div>

---

过时的答案：

检查BS grid system and alignment如何使它成为两行。

这里是代码示例：

.parent.d-flex {
  flex-direction: row !important;
  align-items: center;
}

<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3" crossorigin="anonymous">

<p class="display-6">Without markup changes</p>
<div class="parent d-flex flex-column py-2">

  <div class="container p-0 flex-grow-1">
    <div class="mb-1 d-flex justify-content-center">
      <img src="https://i.picsum.photos/id/237/300/200.jpg?hmac=WSdbBEXvCVSqNN1HnCzm7ohp6DhAJfl9t3TcqBNDn_Q" />
    </div>
  </div>
  <div class="container p-0 flex-grow-1">
    <div class="mb-1 d-flex justify-content-center">
      <p>Vivamus euismod mauris. In ac felis quis tortor malesuada pretium. Vestibulum purus quam, scelerisque ut, mollis sed, nonummy id, metus. Phasellus viverra nulla ut metus varius laoreet. Curabitur ullamcorper ultricies nisi. Cum sociis natoque penatibus
        et magnis dis parturient montes, nascetur ridiculus mus. Sed hendrerit. Nunc egestas, augue at pellentesque laoreet, felis eros vehicula leo, at malesuada velit leo quis pede. In enim justo, rhoncus ut, imperdiet a, venenatis vitae, justo. Praesent
        vestibulum dapibus nibh. Cras varius. Praesent ac massa at ligula laoreet iaculis. Sed cursus turpis vitae tortor. Curabitur at lacus ac velit ornare lobortis. Maecenas vestibulum mollis diam. Fusce risus nisl, viverra et, tempor et, pretium in,
        sapien. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Cras risus ipsum, faucibus ut, ullamcorper id, varius ac, leo. Donec interdum, metus et hendrerit aliquet, dolor diam sagittis ligula, eget egestas
        libero turpis vel mi. Quisque id mi. Suspendisse nisl elit, rhoncus eget, elementum ac, condimentum eget, diam. Proin viverra, ligula sit amet ultrices semper, ligula arcu tristique sapien, a accumsan nisi mauris ac eros. Proin viverra, ligula
        sit amet ultrices semper, ligula arcu tristique sapien, a accumsan nisi mauris ac eros. Phasellus blandit leo ut odio. Curabitur vestibulum aliquam leo.</p>
    </div>
  </div>

</div>

<hr />

<p class="display-6">BS 5 example</p>
<div class="container">
  <div class="row align-items-center">
    <div class="col">
      <img class="img-fluid" src="https://i.picsum.photos/id/237/300/200.jpg?hmac=WSdbBEXvCVSqNN1HnCzm7ohp6DhAJfl9t3TcqBNDn_Q" />
    </div>

    <div class="col">
      <p>Vivamus euismod mauris. In ac felis quis tortor malesuada pretium. Vestibulum purus quam, scelerisque ut, mollis sed, nonummy id, metus. Phasellus viverra nulla ut metus varius laoreet. Curabitur ullamcorper ultricies nisi. Cum sociis natoque penatibus
        et magnis dis parturient montes, nascetur ridiculus mus. Sed hendrerit. Nunc egestas, augue at pellentesque laoreet, felis eros vehicula leo, at malesuada velit leo quis pede. In enim justo, rhoncus ut, imperdiet a, venenatis vitae, justo. Praesent
        vestibulum dapibus nibh. Cras varius. Praesent ac massa at ligula laoreet iaculis. Sed cursus turpis vitae tortor. Curabitur at lacus ac velit ornare lobortis. Maecenas vestibulum mollis diam. Fusce risus nisl, viverra et, tempor et, pretium in,
        sapien. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Cras risus ipsum, faucibus ut, ullamcorper id, varius ac, leo. Donec interdum, metus et hendrerit aliquet, dolor diam sagittis ligula, eget egestas
        libero turpis vel mi. Quisque id mi. Suspendisse nisl elit, rhoncus eget, elementum ac, condimentum eget, diam. Proin viverra, ligula sit amet ultrices semper, ligula arcu tristique sapien, a accumsan nisi mauris ac eros. Proin viverra, ligula
        sit amet ultrices semper, ligula arcu tristique sapien, a accumsan nisi mauris ac eros. Phasellus blandit leo ut odio. Curabitur vestibulum aliquam leo.</p>
    </div>
  </div>
</div>