フレックスボックスと従来の方法を使用してブートストラップでコンテナを垂直方向の中央に配置する方法は?

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

Bootstrap を使用する場合、特に jumbotron コンポーネント内で垂直方向の位置合わせが必要になることがよくあります。この記事では、フレキシブル ボックスと従来の方法を使用してこれを実現する 2 つのアプローチについて詳しく説明します。

フレキシブル ボックスのアプローチ

フレキシブル ボックス レイアウトの出現により、垂直方向の配置が大幅に簡素化されました。このメソッドは、display: flex プロパティと center に設定された align-items プロパティを利用します。

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

レガシー ブラウザに対する従来のアプローチ

Internet Explorer 8 および 9 との互換性については、従来のアプローチ疑似要素とインラインブロック要素を利用することをお勧めします。このメソッドには、全高さの擬似要素を作成し、その垂直位置を中央に設定し、擬似要素とコンテナ要素の両方の表示をインラインブロックに設定することが含まれます。

.vertical-center {
  height: 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;
}

追加考慮事項

• 非常に小さい画面での垂直方向の配置の問題を防ぐために、CSS を使用して疑似要素の高さを auto または 0 に設定できます。メディア クエリ。
• フッター/ヘッダー セクションが他の要素の上に表示されたままになるようにするには、適切な配置とより高い Z インデックス値の使用を検討してください。

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