Как вертикально центрировать заголовок H1 в пределах div с минимальной высотой

Question

У меня есть этот div с фоновым изображением, к которому применено свойство min-height (400px). Я хочу, чтобы заголовок h1 отображался справа в его вертикальном центре.

Я использовал предоставленный класс my-auto, но он ничего не делает. Даже пробовал вместе с классом h-100.

Codepen: https://codepen.io/anon/pen/QRywbw

<section id="message">
<div class="container">
<div class="row">
<div class="col-md-4 offset-md-8 my-auto">
<h1 class="text-right align-middle">Give <span>alternate medicine</span> a chance!</h1>
</div>
</div>
</div>
</section>

#message {
min-height: 400px;
background: url(https://via.placeholder.com/1000x400) no-repeat;
background-size: cover;
}

Я хочу, чтобы текст располагался по центру.

Answer 1

Вы можете использовать этот CSS и видеть тег h1 вертикально по центру.

#message{
        min-height: 400px;
        background: url(https://via.placeholder.com/1000x400) no-repeat;
        background-size: cover;
        position: relative;
    }

#message h1 {
    color: #fff;
    position: absolute;
    top: 47%;
    text-align: center;
    width: 100%;
    margin: 0 auto;
}

Спасибо

Answer 2

Может быть более идиоматический способ начальной загрузки использовать flexbox с вертикальным центрированием, но вот способ использования vanbox css с использованием flexbox:

#message {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 400px;
  background: url(https://via.placeholder.com/1000x400) no-repeat;
  background-size: cover;
}

#message h1 {
  color: #fff;
}

Я часто называю это хорошей статьей на эту тему: https://philipwalton.github.io/solved-by-flexbox/demos/vertical-centering/.

Answer 3

Лучший способ получить что-нибудь вертикально по центру - использовать flex-box.

#message{
  min-height: 400px;
  background: url(https://via.placeholder.com/1000x400) no-repeat;
  background-size: cover;
  display:flex;
  flex-direction:column;
  justify-content:center;
}

Answer 4

<section id="message" class="d-flex align-items-center">