[解決済み】Bootstrap センターの垂直方向と水平方向の位置合わせについて

質問

フォームだけが存在するページがあるのですが、フォームを画面の中央に配置したいのです。

<div class="container">
  <div class="row justify-content-center align-items-center">
    <form>
      <div class="form-group">
        <label for="formGroupExampleInput">Example label</label>
        <input type="text" class="form-control" id="formGroupExampleInput" placeholder="Example input">
      </div>
      <div class="form-group">
        <label for="formGroupExampleInput2">Another label</label>
        <input type="text" class="form-control" id="formGroupExampleInput2" placeholder="Another input">
      </div>
    </form>   
  </div>  
</div>

は justify-content-center はフォームを水平に整列させますが、垂直に整列させる方法がわかりません。試しに align-items-center と align-self-center が、うまくいきません。

何が足りないのでしょうか？

DEMO

解決方法

Bootstrap 5 (2021年更新)

Bootstrap 5はまだ フレックスボックス ベースのため、垂直方向の中央揃えは Bootstrap 4 と同じように機能します。たとえば align-items-center (フレックスディレクション: 行) と justify-content-center (flex-direction: column) はフレックスボックスの親 (row または d-flex) で使用することができます。

Bootstrap 5 のセンタリングの例

垂直方向の中央（親は高さを定義する必要があることを忘れないでください！）。

• my-auto センタリング用 内側 フレックス ( .d-flex ) 要素
• my-auto は、以下のように使用できます。 列の中央 ( .col- ) 内側 row
• align-items-center へ センターカラム ( col-* ) 内側 row

水平方向の中心。

• text-center を中心に display:inline 要素 & カラムの内容
• mx-auto フレックス要素内を中央寄せにする
• mx-auto は、以下のように使用することができます。 列の中央 ( .col- ) 内部 row
• justify-content-center へ センターカラム ( col-* ) 内部 row

Bootstrap 4.3+ (2019年アップデート)

そこには 必要ない のために 余分なCSS . Bootstrapにすでに含まれているものであれば、問題ありません。フォームのコンテナ(複数可)が フルハイト . Bootstrap4では h-100 クラスは、高さ100%に対応するために...

垂直方向の中心。

<div class="container h-100">
  <div class="row h-100 justify-content-center align-items-center">
    <form class="col-12">
      <div class="form-group">
        <label for="formGroupExampleInput">Example label</label>
        <input type="text" class="form-control" id="formGroupExampleInput" placeholder="Example input">
      </div>
      <div class="form-group">
        <label for="formGroupExampleInput2">Another label</label>
        <input type="text" class="form-control" id="formGroupExampleInput2" placeholder="Another input">
      </div>
    </form>   
  </div>
</div>

https://codeply.com/go/raCutAGHre

アイテムを中央に配置するコンテナの高さは100%でなければなりません。 (または、中央に配置されたアイテムからの相対的な高さが必要な場合)

注 height:100% ( パーセントの高さ ) を任意の要素で使用する場合、要素 は、そのコンテナの高さを取り込みます。 . モダンブラウザでは vh 単位 height:100vh; の代わりに使用することができます。 % を使用すると、希望する高さになります。

したがって、html, body {height: 100%} を設定するか、あるいは、新しい min-vh-100 クラスの代わりにコンテナで h-100 .

水平方向の中心。

• text-center を中心に display:inline 要素 & カラムの内容
• mx-auto フレックス要素内を中央寄せにする
• offset-* または mx-auto を使用することができます。 列の中央 ( .col- )
• justify-content-center から センターカラム ( col-* ) 内部 row

Bootstrapにおける垂直方向の中央揃え

Bootstrap 4 のフルスクリーン中央揃えフォーム

Bootstrap 4 のセンター入力グループ

Bootstrap 4の水平＋垂直の中央フルスクリーン