Flexboxでスマートに中央揃え

2024-04-15

Bootstrapでコンテナを垂直方向に中央揃えする方法

方法 1: Flexbox を使用する

Bootstrap 4 以降では、Flexbox を使用してコンテナを垂直方向に中央揃えするのが最も簡単な方法です。Flexbox は、要素を柔軟に配置するためのレイアウトモードです。

<div class="container d-flex flex-column align-items-center">
  </div>

このコードは、以下のことを行います。

.container クラスに d-flex クラスを追加して、Flexbox を有効にします。
.flex-column クラスを追加して、Flexbox コンテナの軸方向を垂直方向に設定します。
.align-items-center クラスを追加して、Flexbox アイテムを垂直方向に中央揃えします。

方法 2: 高さを設定してマージンを自動調整する

Bootstrap 4 以前または Flexbox を使用できない場合は、コンテナの高さを設定してマージンを自動調整することで、垂直方向に中央揃えすることができます。

<div class="container" style="height: 100vh; display: flex; align-items: center;">
  </div>

height: 100vh を設定して、コンテナの高さをビューポートの高さに等しくします。
display: flex; を設定して、Flexbox を有効にします。

古いバージョンの Bootstrap または複雑なレイアウトの場合は、Table を使用してコンテナを垂直方向に中央揃えすることができます。

<div class="container">
  <table>
    <tr>
      <td class="align-middle">
        </td>
    </tr>
  </table>
</div>

.container クラスに table 要素を配置します。
<tr> 要素内に td 要素を配置します。
.align-middle クラスを td 要素に追加して、コンテンツを垂直方向に中央揃えします。

補足

上記の方法は、単一のコンテナを垂直方向に中央揃えする場合にのみ適用されます。複数のコンテナを垂直方向に中央揃えする必要がある場合は、より複雑なレイアウトが必要になる場合があります。

Bootstrap でコンテナを垂直方向に中央揃えするサンプルコード

<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Bootstrap でコンテナを垂直方向に中央揃えする</title>
  <link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-qBiT1w/9mEIGAgT4W4L+42788r2HCGMQ0ywsR5rG0I8HY5k/cGbaKZ2i5k" crossorigin="anonymous">
</head>
<body>
  <div class="container d-flex flex-column align-items-center">
    <h1>コンテナ</h1>
    <p>このコンテナは Flexbox を使用して垂直方向に中央揃えされています。</p>
  </div>

  <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js" integrity="sha384-oVuTldy3zU7aAaCQBi0z3pmiJ9g7n17VqU4FfqzSJz9lW0/FgoQ+8o83i7Z4Q" crossorigin="anonymous"></script>
</body>
</html>

<!DOCTYPE html>, <html>, <head>, <title>, <link>, <body> などの標準的な HTML タグを追加します。
Bootstrap CSS ファイル (https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css) を <link> タグを使用して読み込みます。
.container クラス、d-flex クラス、flex-column クラス、align-items-center クラスを div 要素に追加して、Flexbox を使用してコンテナを垂直方向に中央揃えします。
<h1> 要素と <p> 要素を追加して、コンテナ内にコンテンツを追加します。

<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Bootstrap でコンテナを垂直方向に中央揃えする</title>
  <link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-qBiT1w/9mEIGAgT4W4L+42788r2HCGMQ0ywsR5rG0I8HY5k/cGbaKZ2i5k" crossorigin="anonymous">
</head>
<body>
  <div class="container" style="height: 100vh; display: flex; align-items: center;">
    <h1>コンテナ</h1>
    <p>このコンテナは、高さを設定してマージンを自動調整することで垂直方向に中央揃えされています。</p>
  </div>

  <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js" integrity="sha384-oVuTldy3zU7aAaCQBi0z3pmiJ9g7n17VqU4FfqzSJz9lW0/FgoQ+8o83i7Z4Q" crossorigin="anonymous"></script>
</body>
</html>

このコードは、方法 1 と

Bootstrapでコンテナを垂直方向に中央揃えするその他の方法

この方法は、古いバージョンの Bootstrap または複雑なレイアウトの場合に役立ちます。

<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Bootstrap でコンテナを垂直方向に中央揃えする</title>
  <link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-qBiT1w/9mEIGAgT4W4L+42788r2HCGMQ0ywsR5rG0I8HY5k/cGbaKZ2i5k" crossorigin="anonymous">
</head>
<body>
  <div class="container">
    <table>
      <tr>
        <td class="align-middle">
          <h1>コンテナ</h1>
          <p>このコンテナは、Table を使用して垂直方向に中央揃えされています。</p>
        </td>
      </tr>
    </table>
  </div>

  <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js" integrity="sha384-oVuTldy3zU7aAaCQBi0z3pmiJ9g7n17VqU4FfqzSJz9lW0/FgoQ+8o83i7Z4Q" crossorigin="anonymous"></script>
</body>
</html>

方法 4: Absolute Positioning を使用する

<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Bootstrap でコンテナを垂直方向に中央揃えする</title>
  <link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-qBiT1w/9mEIGAgT4W4L+42788r2HCGMQ0ywsR5rG0I8HY5k/cGbaKZ2i5k" crossorigin="anonymous">
</head>
<body>
  <div class="container" style="position: relative; height: 100vh;">
    <div class="inner-container" style="position: absolute; top: 50%; transform: translateY(-50%);">
      <h1>コンテナ</h1>
      <p>このコンテナは、Absolute Positioning を使用して垂直方向に中央揃えされています。</p>
    </div>
  </div>

  <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js" integrity="sha384-oVuTldy3zU7aAaCQBi0z3pmiJ9g7n17VqU4FfqzSJz9lW0/FgoQ+8o83i7Z4Q" crossorigin="anonymous"></script>
</body>
</html>

.container クラスに position: relative; と height: 100vh; スタイルを追加して、コンテナをビューポートの高さに等しくし、相対的な配置を可能にします。
.inner-container クラスに position: absolute;、top: 50%;、`

html css twitter-bootstrap