CSSで要素を中央揃えにする方法まとめ｜text-align・margin・flexboxなどを解説

このCSSチュートリアルでは、テキストやブロック要素を中央揃えにする方法を詳しく解説します。レイアウト内で要素を水平方向・垂直方向に中央配置するには、いくつかの便利なテクニックがあります。状況に応じて最適な方法を選べるように、代表的な手法を順番に見ていきましょう。

テキストを中央揃えにする（text-align）

親要素の中にあるテキストを中央揃えにしたい場合は、text-align: center; を使います。以下の例では、div要素内の段落・ボタン・テキストがすべて中央に配置されます。

<!DOCTYPE html>
<html lang="ja">
<head>
   <meta charset="UTF-8">
   <meta name="viewport" content="width=device-width, initial-scale=1.0">
   <title>Center</title>
   <style>
       .div-class {
           text-align: center;
           background-color: lightblue;
       }
       button {
           width: 200px;
       }
   </style>
</head>
<body>
   <div class="div-class">
       <p>私は段落です</p>
       <button>送信ボタンです</button>
       <div>私はdivです</div>
       <p>text-align: center によってすべてのテキストが中央揃えになっています</p>
   </div>
</body>
</html>

ブロック要素を中央揃えにする（margin: auto）

ブロック要素の中央揃えは、HTMLドキュメントの <body> タグを使うと分かりやすく理解できます。ポイントは、コンテナ全体の幅を指定した上で、margin を auto に設定することです。これにより、左右の余白が自動的に均等になり、要素全体が画面の中央に配置されます。

<!DOCTYPE html>
<html lang="ja">
<head>
   <meta charset="UTF-8">
   <meta name="viewport" content="width=device-width, initial-scale=1.0">
   <title>Center</title>
   <style>
       body {
           width: 800px;
           margin: auto;
           background: darkcyan;
           color: white;
           font-family: 'Roboto';
           padding: 20px;
       }
       .div-class {
           text-align: center;
           background-color: lightblue;
           color: black;
       }
       button {
           width: 200px;
       }
   </style>
</head>
<body>
bodyの先頭部分です。アプリコンテナ全体の幅（この例では800px）を制御し、<strong>margin: auto</strong> を使うことでアプリ全体を中央に配置できます。このテキスト自体を中央揃えにしたい場合は、text-align: center を使用します。
   <div class="div-class">
       <p>私は段落です</p>
       <button>送信ボタンです</button>
       <div>私はdivです</div>
       <p><strong>text-align: center</strong> によってすべてのテキストが中央揃えになっています</p>
   </div>
</body>
</html>

画像を中央揃えにする

画像を中央に配置するには、CSSセレクタで display を block に変更し、% または px を使って画像の幅を指定した上で、margin を auto に設定します。インライン要素である画像をブロック化することで、marginによる自動センタリングが有効になります。

<!DOCTYPE html>
<html lang="ja">
<head>
   <meta charset="UTF-8">
   <meta name="viewport" content="width=device-width, initial-scale=1.0">
   <title>Center</title>
   <style>
       body {
           width: 800px;
           margin: auto;
           background: darkcyan;
           color: white;
           font-family: 'Roboto';
           padding: 20px;
       }
       img {
           display: block;
           margin: 20px auto;
           width: 50%;
       }
   </style>
</head>
<body>
   <p style="margin: auto; width: 400px;">下の画像を中央揃えにするには、display を block に変更し、margin を auto に設定します。幅は px または % で制御します。</p>
   <img src="https://www.placekitten.com/500/301" alt="子猫の画像"/>
</body>
</html>

div内で垂直・水平方向に中央揃えする方法

続いて、<div> の中で要素を垂直方向にも中央揃えする方法を紹介します。主な手法として「padding」「line-height」「transform」「flexbox」の4つがあります。それぞれ特徴が異なるので、用途に合わせて使い分けましょう。

1. paddingを使う方法

最もシンプルなのが、<div> のpaddingを調整して上下の余白を均等にする方法です。この方法なら、text-align: center と組み合わせるだけで、段落を水平・垂直の両方向に中央配置できます。

.div-class {
    padding: 80px 0;
    text-align: center;
}

2. line-heightを使う方法

line-height を中央揃えしたいブロック要素の高さと同じ値に設定し、text-align: center と組み合わせる方法もあります。ただし、この方法は1行のテキスト向きです。複数行になる場合は、親要素と子要素の両方に line-height を指定し、さらに子要素に vertical-align: middle と display: inline-block を追加しましょう。

<!DOCTYPE html>
<html lang="ja">
<head>
   <meta charset="UTF-8">
   <meta name="viewport" content="width=device-width, initial-scale=1.0">
   <title>Center</title>
   <style>
       #vertical-center-lineheight {
           line-height: 200px;
           border: 5px double ivory;
           text-align: center;
           margin-bottom: 20px;
       }
   </style>
</head>
<body>
   <div id="vertical-center-lineheight">
       <p>line-heightとtext-align: centerを使って、div内で垂直・水平方向に中央揃えされています。</p>
   </div>
</body>
</html>

3. transformを使う方法

position と transform を組み合わせる方法もあります。親要素に position: relative を指定し、子要素を絶対配置（absolute）にします。その上で、子要素を上端・左端から50%の位置に置き、transform プロパティで要素の中心を基準に位置を微調整します。このプロパティについては別の記事で詳しく解説するので、今は完全に理解できなくても問題ありません。

<!DOCTYPE html>
<html lang="ja">
<head>
   <meta charset="UTF-8">
   <meta name="viewport" content="width=device-width, initial-scale=1.0">
   <title>Center</title>
   <style>
       #vertical-center-transform {
           height: 200px;
           position: relative;
           border: 5px double ivory;
           margin-bottom: 20px;
       }
       #vertical-center-transform p {
           margin: 0;
           position: absolute;
           top: 50%;
           left: 50%;
           transform: translate(-50%, -50%);
       }
   </style>
</head>
<body>
   <div id="vertical-center-transform">
       <p>transformを使ってdiv内で垂直・水平方向に中央揃えされています。</p>
   </div>
</body>
</html>

4. flexboxを使う方法

最後に紹介するのが、現代のWeb開発で最も広く使われているflexboxによる方法です。中央揃えしたい子要素を持つ親要素に display: flex を指定し、align-items と justify-content を使って中央に配置します。わずか数行のCSSで、垂直・水平両方向の中央揃えが実現できるのが大きな魅力です。

<!DOCTYPE html>
<html lang="ja">
<head>
   <meta charset="UTF-8">
   <meta name="viewport" content="width=device-width, initial-scale=1.0">
   <title>Center</title>
   <style>
       #vertical-center-flexbox {
           height: 200px;
           display: flex;
           align-items: center;
           justify-content: center;
           border: 5px double ivory;
       }
   </style>
</head>
<body>
   <div id="vertical-center-flexbox">
       <p>flexboxを使ってdiv内で垂直・水平方向に中央揃えされています。</p>
   </div>
</body>
</html>

まとめ

今回は、レイアウト内で要素を中央揃えにするための主要なテクニックを紹介しました。テキストなら text-align、ブロック要素や画像なら margin: auto、そして垂直方向の中央揃えには padding・line-height・transform・flexbox といった選択肢があります。特に迷ったときは、シンプルで汎用性の高いflexboxを採用するのがおすすめです。それぞれの特性を理解して、目的に合った方法を使い分けてください。

CSSのborder-imageプロパティ完全ガイド｜画像ボーダーの使い方とブラウザごとの注意点

CSS Flexbox入門：親コンテナと子アイテムの主要プロパティを徹底解説

CSSで兄弟要素を選択する方法｜隣接兄弟セレクタ（+）と一般兄弟セレクタ（~）の違いを解説
CSSには、同じ親要素を持つ「兄弟要素」を選択するための結合子が2種類用意されています。1つは隣接兄弟結合子（+）、もう1つは一般兄弟結合子（~）です。それぞれの動作の違いを理解して、目的に応じて使い分けましょう。隣接兄弟結合子（+）とは隣接兄弟結合子（+）は、最初のセレクタで指定した要素の直後に隣接している要素だけをマッチさせたい場合に使用します。2つのセレクタは、必ず同じ親要素の子要素である必要があります。 CSSにおける隣接兄弟結合子の構文は以下の通りです。 Selector + Selector { attribute: /*値*/ } 一般兄弟結合子（~）とは一方、2つ
PowerToysでWindows 10/11をもっと便利に！無料ツールのダウンロードから使い方まで徹底解説
PowerToysは、Windows 10およびWindows 11の操作を効率化し、生産性を高めることを目的とした無料ユーティリティ集です。PowerToysはWindows 95向けに初めて登場し、その後Windows XP向けに提供された後、現在はWindows 10と11向けのオープンソースプロジェクトとして公開されています。 PowerToysを使えば、ファイルの一括リネーム、画像の一括リサイズ、アプリのクイック起動など、さまざまな作業を素早く行えます。この記事では、PowerToysのダウンロード方法と、各ツールの使い方を詳しく解説します。 PowerToysとは？ PowerTo