Bootstrapで縦中央・横中央に配置する方法を完全解説！flexユーティリティで初心者でも迷わないレイアウト

縦中央・横中央の配置テクニック：flexユーティリティ完全版

先生と生徒の会話形式で理解しよう

生徒

「Bootstrapで文字や画像を真ん中に置きたいんですが、なぜかズレてしまいます…」

先生

「それは、縦と横の中央配置を正しく指定していないからです。Bootstrapのflexユーティリティを使えば簡単にできますよ。」

生徒

「flexって聞くと難しそうです。パソコン初心者でも理解できますか？」

先生

「大丈夫です。箱の中に物を置くイメージで、順番に説明します。」

1. 中央配置が難しく感じる理由

Webページで文字や画像を中央に配置したい場面はとても多いです。しかし、縦と横の両方を中央にそろえるのは、初心者にとって難しく感じやすいポイントです。これは、画面には上下と左右という二つの方向があるためです。

Bootstrapでは、この悩みを解決するためにflexユーティリティという便利な仕組みが用意されています。これを使うことで、細かい計算をしなくても中央配置ができます。

2. flexとは何かをやさしく理解する

flexとは、並び方を自由に変えられる仕組みです。難しい言葉に聞こえますが、実際はとても単純です。大きな箱の中に小さな箱をどう並べるかを決めるルールだと考えてください。

Bootstrapでは、flexを使いやすくするためのクラスが用意されています。そのため、初心者でも安心して使えます。

3. 横方向を中央にそろえる方法

まずは横方向、つまり左右の中央に配置する方法です。これは、箱の中で左右のバランスを取るイメージです。 Bootstrapではjustify-content-centerを使います。


<div class="container">
  <div class="d-flex justify-content-center">
    <div class="p-3 bg-light">横中央</div>
  </div>
</div>

ブラウザ表示

この例では、文字が左右の真ん中に配置されます。 justifyは整えるという意味だと覚えると理解しやすくなります。

4. 縦方向を中央にそろえる方法

次に縦方向、つまり上下の中央に配置する方法です。 align-items-centerを使うことで、上下の真ん中にそろいます。背の高い箱の真ん中に物を置くイメージです。


<div class="container">
  <div class="d-flex align-items-center" style="height:200px;">
    <div class="p-3 bg-light">縦中央</div>
  </div>
</div>

ブラウザ表示

高さがある箱の中で、要素が上下の中央に配置されます。高さを決めることがポイントです。

5. 縦と横を同時に中央にする方法

縦と横を同時に中央にしたい場合は、二つの指定を組み合わせます。これが、よく使われる中央配置の基本形です。


<div class="container">
  <div class="d-flex justify-content-center align-items-center" style="height:200px;">
    <div class="p-3 bg-light">縦横中央</div>
  </div>
</div>

ブラウザ表示

この形を覚えておくと、ログイン画面や案内表示などで役立ちます。

6. 画像を中央に配置する例

文字だけでなく、画像も同じ方法で中央に配置できます。ブログやWebサイトでは、画像の中央配置はとても重要です。


<div class="container">
  <div class="d-flex justify-content-center align-items-center" style="height:200px;">
    <img src="/img/sample150-100.jpg" alt="サンプル画像">
  </div>
</div>

ブラウザ表示

画像でも同じ考え方が使えるので、特別な知識は必要ありません。