カードを上下左右中央に配置するFlexboxの使い方【HTML/CSS・サンプルコード付き】

Flexbox

カードを上下左右中央に配置するFlexboxの使い方

カードを上下左右中央に配置するFlexboxの使い方を紹介します。本記事では、HTMLとCSSを使って、高さのあるエリア内にカードを中央配置する方法を解説します。上下方向と左右方向の両方を中央にそろえることで、カードを画面の中心に置いたような見た目を作ることができます。

このサンプルコードでは、Flexboxの justify-content:center; と align-items:center; を使用します。justify-content:center; で左右方向の中央へ配置し、align-items:center; で上下方向の中央へ配置します。

上下左右中央の配置は、ログイン画面、案内カード、完了メッセージ、エラー表示、ヒーローエリアなどでよく利用されます。カードを画面や枠の中央にきれいに配置したい場合に便利なFlexboxの基本テクニックです。

コードについて 本記事のコードはサンプルコードです。ご利用前に必ず動作確認を行ってください。
免責事項 本コードの利用により発生した損害について、当サイトは一切の責任を負いません。

デモ

カードを上下左右中央に配置するFlexbox

下のカードは、高さのあるエリア内で上下左右の中央に配置されています。

justify-content:center; を指定すると、カードを左右方向の中央へ配置できます。
align-items:center; を指定すると、カードを上下方向の中央へ配置できます。

コードをコピーして使おう！

<!DOCTYPE html>
<html lang="ja">
<head>

  <!-- 文字コードを指定 -->
  <meta charset="UTF-8">

  <!-- スマホ表示に対応 -->
  <meta name="viewport" content="width=device-width, initial-scale=1.0">

  <!-- ページタイトル -->
  <title>カードを上下左右中央に配置するFlexboxの使い方</title>

  <!-- CSSファイルを読み込み -->
  <link rel="stylesheet" href="style.css">

</head>
<body>

  <!-- 全体エリア -->
  <div class="center-both-flexbox-card-layout_wrap">

    <!-- タイトル -->
    <h1 class="center-both-flexbox-card-layout_title">
      カードを上下左右中央に配置するFlexbox
    </h1>

    <!-- カードを配置するエリア -->
    <div class="center-both-flexbox-card-layout_area">

      <!-- 中央に配置するカード -->
      <div class="center-both-flexbox-card-layout_card"></div>

    </div>

  </div>

</body>
</html>

ファイル構成と設置方法

このサンプルでは、HTMLとCSSを別ファイルで管理します。HTMLにカードを配置するエリアを作成し、CSSでFlexboxを使ってカードを上下左右の中央へ配置します。 

sample/
├── index.html
└── style.css

2つのファイルを同じフォルダへ配置し、ブラウザで index.html を開いてください。カードを上下左右中央に配置するには、カードを配置するエリアに display:flex; を指定し、さらに justify-content:center; と align-items:center; を追加します。

コメント