Bootstrapで要素を画面中央に配置する方法
概要: この記事では、BootstrapのFlexboxユーティリティクラスを使用して、要素を画面の水平方向と垂直方向の中央に簡単に配置する方法を紹介します。
キーワード: Bootstrap, センタリング, 画面中央揃え, Flexbox, d-flex, align-items-center, justify-content-center
Flexboxを使用した要素のセンタリング
Bootstrap 4以降では、Flexboxレイアウトモジュールが統合され、強力なレイアウト制御が可能になりました。 d-flex、align-items-center、justify-content-center クラスを組み合わせて使用すると、要素を画面上で水平方向と垂直方向に簡単にセンタリングできます。
手順：
- コンテナ要素を作成する: センタリングする要素の親コンテナとして
div要素を作成します。 - Flexboxクラスを追加する: コンテナ要素に次のBootstrapクラスを追加します。
d-flex: コンテナ要素をFlexコンテナとして定義します。align-items-center: コンテナ内の要素を垂直方向に中央揃えにします。justify-content-center: コンテナ内の要素を水平方向に中央揃えにします。
サンプルコード:
<div class="d-flex align-items-center justify-content-center" style="height: 100vh;">
<div>
<h1>中央に配置されるコンテンツです</h1>
</div>
</div>
コードの説明:
- 外側の
div要素はコンテナとして機能し、height: 100vh;を設定することで画面の高さを占めるようにしています。 d-flexクラスはこのコンテナをFlexコンテナとして定義します。align-items-centerクラスは子要素を垂直方向に中央揃えにします。justify-content-centerクラスは子要素を水平方向に中央揃えにします。
以上の簡単な手順で、BootstrapのFlexboxユーティリティクラスを利用して要素を画面中央に配置することができます。
よくある質問
Q1: vh 単位とは何ですか？
A1: vh はviewport height（ビューポートの高さ）の略で、ブラウザウィンドウの高さに対する相対的な高さの単位です。100vh はブラウザウィンドウの高さの100%を意味します。
Q2: 他の要素を中央揃えにするにはどうすればよいですか？
A2: 上記のサンプルコードでは h1 要素を中央揃えにしていますが、他の要素も同様に中央揃えにすることができます。センタリングしたい要素をコンテナ要素の子要素として配置してください。
Q3: Bootstrap 3で要素をセンタリングするにはどうすればよいですか？
A3: Bootstrap 3ではFlexboxはデフォルトでは有効になっていません。Flexboxを使用するには、Bootstrap 3のドキュメントを参照して、必要なCSSとJavaScriptファイルを追加してください。その後、Flexboxのクラスを使用して要素をセンタリングできます。