چطوری یک کانتینر رو به صورت عمودی در بوت‌ استرپ وسط‌ چین کنیم؟

<div class="d-flex justify-content-center align-items-center vh-100">
  <div class="p-5 bg-light">
      <h1>کانتینر</h1>
  </div>
</div>

از d-flex, justify-content-center و align-items-center برای استفاده از قابلیت Flexbox استفاده می‌کنیم.

vh-100 به کانتینر بیرونی اجازه میده که ارتفاعش برابر با 100 درصد ارتفاع ویوپورت باشه، که باعث میشه کانتینر در مرکز عمودی قرار بگیره.

در نهایت، justify-content-center باعث میشه که کانتینر به صورت افقی وسط‌چین بشه و align-items-center هم اونو به صورت عمودی وسط‌ چین می‌کنه.