Bootstrapで要素を左右中央に寄せるには？

Bootstrapで要素を左右中央揃えする方法

Bootstrapを使って要素を左右中央揃えしたいと思いませんか？この記事では、Flexboxレイアウトと便利なユーティリティクラスを使用して、水平方向のセンタリングを素早く実現するテクニックを詳しく解説し、ページレイアウトをより柔軟で美しくする方法を紹介します。

Flexboxレイアウトを用いた水平方向のセンタリング


<div class="d-flex justify-content-center">
  <div>この要素は水平方向に中央揃えされます</div>
</div>

テキスト、ボタンなどのインライン要素の場合、.text-centerクラスを直接使用して水平方向にセンタリングできます。
ブロックレベル要素の場合、.mx-autoクラスを持つコンテナでネストすることで、水平方向に自動的に外側のマージンが設定され、水平方向にセンタリングできます。


<p class="text-center">このテキストは水平方向に中央揃えされます</p>

<div class="mx-auto" style="width: 200px;">
  このブロックレベル要素は水平方向に中央揃えされます
</div>


<div class="d-flex align-items-center justify-content-center" style="height: 200px;">
  <div>この要素は水平方向と垂直方向に中央揃えされます</div>
</div>

Bootstrapは、要素を水平方向に中央揃えするための柔軟な方法を複数提供しています。実際のニーズに応じて適切な方法を選択し、美しく、プロフェッショナルなWebレイアウトを簡単に作成できます。