Bootstrap 縦・中央寄せが効かない

Question

初歩的な質問ですが。。
Bootstrapにて上下左右中央寄せにしようとしていますが、justify-contentやalign-middleなどを使っても効きません。
お分かりになる方、ご教授頂けますでしょうか？

.main {
  flex: 1;
  background:url("/assets/svg/secret.svg") no-repeat;
  background-size: 100% auto;
  margin-top:15px;
}

  <div class="main container">
    <div class="row d-flex justify-content-center">
      <section class="col-lg-6 text-white text-center">
        <h1>@yield('title')</h1>
        <p class="error-message">@yield('message')</p>
        <p class="error-detail">@yield('detail')</p>
        @yield('link')
      </section>
    </div>
  </div>

Answer 1

以下を追加してみてほしいです。

body,
.main,
.main > .row {
  min-height: 100vh;
}

<div class="row d-flex justify-content-center align-items-center">

---

2つの課題があります。上記ソースコードでは、この2つを解決しました。

1. 初期値「flex-direction: row;」のとき、justify-content: center;は左右の中央配置です。

上下の中央配置をしたいなら、align-items: center;が必要です。
2. bodyやmainなどの高さが、画面幅いっぱいではないので、上下に中央配置しているように見えないため、
高さの最小値を画面の高さにしました。

Comments

[tktail]

ご教授頂いたCSSを追加すると、PC画面は中央になりました。
レスポンシブ対応にするため、cssのbackground-sizeもauto 100vhに変更しました。
ありがとうございました！

[new1ro]

画像についてはこちらの環境で表示できていなかったので、抜け落ちていました..、
解決できたようで、よかったです！