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

Question

I have been trying to make my child content vertically centered as per the parent container. But the child container is always in relative to parent container. Below is the code I have tried:

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

What I am looking is to make Centered Content text vertically centered as per the whole section.

Here is the codepen link: CodePen

Answer 1

Just make h1 position-absolute to remove it from relative positioning within the 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>

Answer 2

Your h1 element is what's causing it to mis-align. If you get rid of it (just to test) you'll see centered content move to the center.

display: flex; applies to all of that elements direct children, so you're aligning to aggregate height of both the h1 and the #welcome element. To have Centered Content in the center of a tall square, you could apply some of the styles you have on #welcome to .my-auto:

.my-auto {
  min-height: 150px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: blue;
}

align-items is what does vertical alignment when using display: flex. However, if you use flex-direction: column, the direction is "rotated", so you would use justify-content: center, which is normally for horizontal alignment.

A different approach is to use padding on top and bottom of the content you want to center:

.my-auto {
  padding: 50px 0; /* 50px is an arbitrary number, just to demonstrate */
}

Note that this will cause centered content to push all other elements vertically away from it.