html - 如何在 bootstrap 4 中使子内容相对于父容器垂直居中

Question

我一直在尝试让我的子内容按照父容器垂直居中。但是子容器总是相对于父容器的。下面是我试过的代码:

HTML

<section id="welcome" class="bg-primary d-flex flex-column">
        <h1>Positions</h1>
        <div class="container text-center my-auto">
           Centered content
        </div>
     </section>

CSS

      #welcome{
        min-height:150px;
        width: 200px;
     }

我正在寻找的是根据整个部分使居中内容文本垂直居中。

这是代码笔链接:CodePen

Answer 1

只需制作 h1 position-absolute 即可将其从 DOM 中的相对定位中移除...

https://codepen.io/anon/pen/EeVXbe

<section id="welcome" class="bg-primary d-flex flex-column">
      <h1 class="position-absolute">Positions</h1>
      <div class="container text-center my-auto">
           Centered content
      </div>
</section>