初心者でも安心！Bootstrap 3 モーダルを垂直方向に中央に配置する3つの方法

2024-05-20

Bootstrap 3 モーダルを垂直方向に中央に配置する方法

方法 1: CSS を使用する

.modal-dialog クラスに以下の CSS を追加します。

.modal-dialog {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

この CSS は、.modal-dialog 要素を絶対配置し、ウィンドウの垂直方向と水平方向の中心から 50% の位置に配置します。 transform: translate(-50%, -50%) プロパティは、要素をその元の位置から 50% だけ左上に移動することで、中央配置を達成します。

方法 2: JavaScript を使用する

以下の JavaScript コードをモーダルの shown.bs.modal イベントに追加します。

$('.modal').on('shown.bs.modal', function () {
  var $modal = $(this);
  var $dialog = $modal.find('.modal-dialog');
  var modalHeight = $dialog.height();
  var windowHeight = $(window).height();
  var top = (windowHeight - modalHeight) / 2;
  $dialog.css('margin-top', top + 'px');
});

この JavaScript コードは、モーダルが表示されたときに、モーダルダイアログの高さとウィンドウの高さを取得し、その差を 2 で割って、ダイアログを垂直方向に中央に配置するのに必要な margin-top 値を計算します。

補足

上記の方法は、Bootstrap 3 のデフォルトのモーダルサイズを前提としています。モーダルサイズを変更している場合は、CSS または JavaScript コードを調整する必要がある場合があります。
モーダル内にコンテンツが追加されると、モーダルダイアログの高さが変わり、垂直方向の中央配置が崩れる可能性があります。この問題を解決するには、JavaScript コードを調整して、モーダルダイアログの高さを動的に計算する必要があります。
Bootstrap 4 以降では、モーダルを垂直方向に中央に配置するためのユーティリティクラス .modal-dialog-centered が導入されています。

Bootstrap 3 モーダルを垂直方向に中央に配置するサンプルコード

<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Bootstrap 3 モーダル 垂直方向中央配置</title>
  <link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-Vk50xS60itYqM+gIMYGD4lflY/7GWPE5o87J6x1r5q5+UIi55eRm4+qU7zi7i6WY" crossorigin="anonymous">
</head>
<body>
  <button type="button" class="btn btn-primary" data-toggle="modal" data-target="#exampleModal">モーダルを開く</button>

  <div class="modal fade" id="exampleModal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true">
    <div class="modal-dialog modal-dialog-centered">
      <div class="modal-content">
        <div class="modal-header">
          <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
          <h4 class="modal-title" id="exampleModalLabel">モーダル タイトル</h4>
        </div>
        <div class="modal-body">
          ... モーダル コンテンツ ...
        </div>
        <div class="modal-footer">
          <button type="button" class="btn btn-default" data-dismiss="modal">閉じる</button>
          <button type="button" class="btn btn-primary">保存</button>
        </div>
      </div>
    </div>
  </div>

  <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/jquery.slim.min.js" integrity="sha384-DfXSqoJ84D7iWDAzWj4zT/39FHQi69xAu0RJ2kWNqsQ+ElISzQSzYzP1+GYi5F" crossorigin="anonymous"></script>
  <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/umd/popper.min.js" integrity="sha384-9pIGZnQP6r2cVN1p/ogU8O8EY2+F41TlPejMYgDF9sCdR4fWN4zEJnJWHc7jxw3" crossorigin="anonymous"></script>
  <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.min.js" integrity="sha384-bnD7zBp9k+u1GHTzsbwTW6b/jF2EWnR4vW1rF53Y9FtFt5N27J9GGJ7yozT+I4" crossorigin="anonymous"></script>
</body>
</html>

このコードでは、.modal-dialog クラスに modal-dialog-centered クラスを追加することで、モーダルを垂直方向に中央に配置しています。

<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Bootstrap 3 モーダル 垂直方向中央配置</title>
  <link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-Vk50xS60itYqM+gIMYGD4lflY/7GWPE5o87J6x1r5q5+UIi55eRm4+qU7zi7i

Bootstrap 3 モーダルを垂直方向に中央に配置するその他の方法

方法 3: グリッドシステムを利用する

Bootstrap のグリッドシステムを使用して、モーダルダイアログを垂直方向に中央に配置することもできます。

<div class="modal fade" id="exampleModal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true">
  <div class="modal-dialog modal-sm">
    <div class="modal-content">
      <div class="modal-header">
        <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
        <h4 class="modal-title" id="exampleModalLabel">モーダル タイトル</h4>
      </div>
      <div class="modal-body">
        ... モーダル コンテンツ ...
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-default" data-dismiss="modal">閉じる</button>
        <button type="button" class="btn btn-primary">保存</button>
      </div>
    </div>
  </div>
</div>

このコードでは、.modal-dialog クラスに modal-sm クラスを追加してモーダルサイズを小さくし、.modal-content 要素を row と col-md-12 クラスでラップして垂直方向に中央に配置しています。

方法 4: Flexbox を使用する

.modal-dialog {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}

この CSS は、.modal-dialog 要素をフレックスコンテナとして設定し、子要素を垂直方向に中央に配置します。

上記の方法でうまくいかない場合は、カスタム CSS を使用してモーダルを垂直方向に中央に配置することもできます。

.modal-dialog {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  margin: 0 auto;
  width: 600px; /* モーダル ダイアログの幅 */
}