ブートストラップでコンテナを垂直中央に配置する方法: フレックスボックスと擬似要素?

Bootstrap でコンテナを垂直中央に配置する方法

フレキシブル ボックス レイアウトの使用 (最新の方法)

最新のブラウザーの場合、フレックスボックスを使用してコンテナを垂直方向の中央に配置できますlayout:

<div class="jumbotron vertical-center">
  <div class="container">
    ...
  </div>
</div>

.vertical-center {
  min-height: 100vh;
  display: flex;
  align-items: center;
}

::before 擬似要素の使用 (従来のメソッド)

古いブラウザの場合は、::before 擬似要素を使用できます。コンテナを整列させるフルハイトの要素を作成する要素垂直:

<div class="jumbotron vertical-center">
  <div class="container">
    ...
  </div>
</div>

.vertical-center {
  height: 100%;
  width: 100%;
  text-align: center;
  font: 0/0 a;
}

.vertical-center:before {
  content: " ";
  display: inline-block;
  vertical-align: middle;
  height: 100%;
}

.vertical-center > .container {
  max-width: 100%;
  display: inline-block;
  vertical-align: middle;
  font: 16px/1 "Helvetica Neue", Helvetica, Arial, sans-serif;
}

追加の考慮事項

• 小さな画面での予期せぬ問題を防ぐために、::before 疑似の高さをリセットできます。 -element を auto または 0 に設定します。
• コンテナの周囲にフッター/ヘッダー セクションがある場合は、それらを配置します。適切に配置し、より高い Z インデックス値を追加して、それらを最上位に保ちます。

以上がブートストラップでコンテナを垂直中央に配置する方法: フレックスボックスと擬似要素?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。