Bootstrap 4 の垂直方向の位置合わせ

Bootstrap 4 の垂直方向の位置合わせは、いくつかの方法で実現でき、それぞれに独自の利点とアプリケーション シナリオがあります。

自動マージン

自動マージンを使用して、要素をコンテナ内で垂直方向の中央に配置できます。これを行うには、中央に配置する要素に my-auto クラスを追加します。例:

Flexbox
Bootstrap 4 はデフォルトで Flexbox を活用し、垂直方向の配置のための強力なツールを提供します。 Flexbox を使用して要素を垂直方向に中央揃えにするには、要素に対して align-self-center クラスを使用します。あるいは、親コンテナで align-items-center を使用すると、すべての flex アイテムが垂直方向に中央に配置されます。
Display Utilities
表示ユーティリティを使用して、要素の表示コンテキストを確立できます。垂直方向の配置ユーティリティと組み合わせて、インラインまたはテーブルのセル要素の垂直方向の配置を微調整できます。例:
これらのテクニックを理解することで、Bootstrap 4 で要素を効果的に垂直方向の中央に配置し、Web ページの配置と視覚的な魅力を高めることができます。