ブートストラップやその他の方法を使用してコンテナを垂直方向の中央に配置するにはどうすればよいですか?

Bootstrap でコンテナを垂直方向に中央揃えにする方法

フレキシブル ボックスによる垂直方向の配置

フレキシブル ボックス レイアウトは、垂直方向の配置のための簡単なソリューションを提供します。これは、Internet Explorer 8 と 9 を除く最新の Web ブラウザーで広くサポートされています。

.vertical-center というクラスを作成し、.jumbotron div に追加します。

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

Traditionalレガシー Web ブラウザのメソッド

Internet Explorer 8 や 9 などのレガシー ブラウザの場合、擬似要素を使用できます。

.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;
}

考慮事項

• インライン要素は、親のベースラインに親の X 高さの半分を加えたものに垂直に配置されます。
• 中央に配置するインライン要素を垂直方向に配置するには、その高さを親の高さと一致するように設定する必要があります。
• 擬似要素フルハイトのインライン ブロック要素を作成して垂直方向の配置を実現するために使用できます。
• インライン要素間のギャップを避けるためにフォント プロパティをリセットします。
• コンテナ周囲の要素の位置と Z インデックスを考慮してください。適切な手配のために。

以上がブートストラップやその他の方法を使用してコンテナを垂直方向の中央に配置するにはどうすればよいですか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。