Bootstrap 4 垂直中央揃え解説

Bootstrap 4における垂直中央揃えの解説

Bootstrap 4では、さまざまな要素を垂直方向に中央揃えにする方法が提供されています。ここでは、その方法について解説します。

Flexboxを利用する

Flexboxは、要素を柔軟に配置できる強力なレイアウトツールです。垂直中央揃えを実現するには、コンテナ要素にflex-direction: column;を設定し、子要素にalign-self: center;を設定します。

<div class="container">
  <div class="row justify-content-center">
    <div class="col-md-4 align-self-center">
      <img src="image.jpg" class="img-fluid" alt="Image">
    </div>
  </div>
</div>

• align-self-center: 子要素を垂直方向に中央揃えします。
• justify-content-center: コンテンツを水平方向に中央揃えします。

d-flex align-items-centerクラスを使用する

このクラスは、Flexboxのflex-direction: row;とalign-items: center;を組み合わせたものです。要素を水平方向に並べつつ、垂直方向に中央揃えします。

<div class="d-flex align-items-center">
  <img src="image.jpg" class="img-fluid" alt="Image">
  <p>This is a centered image.</p>
</div>

text-centerクラスを使用する

このクラスは、テキストを水平方向と垂直方向に中央揃えします。主にテキスト要素に対して使用されます。

<p class="text-center">
  This text is centered both horizontally and vertically.
</p>

カスタムCSSを使用する

場合によっては、これらのクラスだけでは十分でないことがあります。そのような場合は、カスタムCSSを使用して垂直中央揃えを実現できます。

.my-centered-element {
  display: flex;
  align-items: center;
  justify-content: center;
}

<div class="container">
  <div class="row justify-content-center">
    <div class="col-md-4 align-self-center">
      <img src="image.jpg" class="img-fluid" alt="Image">
    </div>
  </div>
</div>

• img-fluid: 画像をコンテナの幅に合わせるクラス。
• col-md-4: メディアクエリに応じて4列分の幅を占める列クラス。
• row: Bootstrapの行クラス。
• container: Bootstrapのコンテナクラス。

<div class="d-flex align-items-center">
  <img src="image.jpg" class="img-fluid" alt="Image">
  <p>This is a centered image.</p>
</div>

• d-flex: Flexboxレイアウトを適用するクラス。

<p class="text-center">
  This text is centered both horizontally and vertically.
</p>

• text-center: テキストを水平方向と垂直方向に中央揃えします。

.my-centered-element {
  display: flex;
  align-items: center;
  justify-content: center;
}

• display: flex: Flexboxレイアウトを適用します。
• .my-centered-element: カスタムクラス。

テーブルを利用する

テーブルは、要素をグリッド状に配置するのに適しています。垂直中央揃えを実現するには、align-middleクラスを使用します。

<table>
  <tr>
    <td class="align-middle">
      <img src="image.jpg" class="img-fluid" alt="Image">
    </td>
    <td>
      <p>This is a centered image.</p>
    </td>
  </tr>
</table>

position: absoluteとtop: 50%を使用する

この方法は、要素を絶対配置し、トップ位置を50%に設定することで垂直中央揃えを実現します。ただし、親要素の高さが必要になります。

<div class="container">
  <div class="row">
    <div class="col-md-4">
      <img src="image.jpg" class="img-fluid" alt="Image" style="position: absolute; top: 50%; transform: translateY(-50%);">
    </div>
  </div>
</div>

transform: translateY(-50%)を使用する

この方法は、要素を垂直方向に50%だけ移動させることで中央揃えを実現します。

<div class="container">
  <div class="row">
    <div class="col-md-4">
      <img src="image.jpg" class="img-fluid" alt="Image" style="transform: translateY(-50%);">
    </div>
  </div>
</div>

line-heightを使用する

テキスト要素に対しては、line-heightプロパティを使用して垂直中央揃えを実現できます。

<p style="line-height: 100px;">
  This text is centered vertically.
</p>