modal-dialog-centered

bootstrap5.css

bootstrap5.css
.modal-dialog-centered {
  display: flex;
  align-items: center;
  min-height: calc(100% - 1rem);
}
bootstrap5.css
@media (min-width: 576px) {
  .modal-dialog {
    max-width: 500px;
    margin: 1.75rem auto;
  }
  .modal-dialog-scrollable {
    height: calc(100% - 3.5rem);
  }
  .modal-dialog-centered {
    min-height: calc(100% - 3.5rem);
  }
  .modal-sm {
    max-width: 300px;
  }
}

html bootstrap5 Sample

js 垂直方向中央に配置するモーダル：modal-dialog-centered

  <div class="container">
    <button type="button" class="btn btn-secondary" data-bs-toggle="modal"
      data-bs-target="#exampleModal3">モーダルボタン</button>
    <!-- モーダルウィンドウ外枠 id="exampleModal3"-->
    <div class="modal fade" id="exampleModal3" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel"
      aria-hidden="true">
      <div class="modal-dialog modal-dialog-centered" role="document">
        <div class="modal-content">
          <div class="modal-header">
            <h5 class="modal-title" id="exampleModalLabel">モーダルのタイトル</h5>
            <!-- モーダルの×ボタン -->
            <button type="button" class="close" data-bs-dismiss="modal" aria-label="Close">
              <span aria-hidden="true">×</span>
            </button>
          </div>
          <div class="modal-body">
            モーダルの本文が入ります。
          </div>
          <div class="modal-footer">
            <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">閉じる</button>
          </div>
        </div>
      </div>
    </div>
  </div>
  <style>
    .row>.col,
    .row>[class^=col-] {
      padding-top: 0.5rem;
      padding-bottom: 0.5rem;
      background-color: f8f8ff;
      border: 1px solid #aaa;
    }
  </style>

js グリッドレイアウトを使用したモーダル：rowとcol

  <div class="container">
    <button type="button" class="btn btn-secondary" data-bs-toggle="modal"
      data-bs-target="#exampleModal4">モーダルボタン</button>
    <!-- モーダルウィンドウ外枠 id="exampleModal4"-->
    <div class="modal fade" id="exampleModal4" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel"
      aria-hidden="true">
      <div class="modal-dialog modal-dialog-centered" role="document">
        <div class="modal-content">
          <div class="modal-header">
            <h5 class="modal-title" id="exampleModalLabel">モーダルのタイトル</h5>
            <button type="button" class="close" data-bs-dismiss="modal" aria-label="Close"><span
                aria-hidden="true">×</span></button>
          </div>
          <div class="modal-body">
            <!-- container-fluidは画面いっぱい -->
            <div class="container-fluid">
              <div class="row">
                <div class="col-md-4">col-md-4</div>
                <div class="col-md-4 ms-auto">col-md-4、ms-auto</div>
              </div>
              <div class="row">
                <div class="col-md-3 ms-auto">col-md-3、ms-auto</div>
                <div class="col-md-2 ms-auto">col-md-2、ms-auto</div>
              </div>
            </div>
          </div>
          <div class="modal-footer">
            <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">閉じる</button>
          </div>
        </div>
      </div>
    </div>
  </div>