【実例多数】HTMLで中央寄せを実現するコードを徹底解説

（最終更新日：2023年6月）

✔以下のような方々におすすめです

「HTMLでどうやって要素を中央寄せにするのか？」
「HTMLでの中央寄せの手法を具体的に知りたい」
「HTMLで要素を中央寄せにする具体的な例を見てみたい」

✔当記事で学べること

HTMLでの要素の中央寄せの基本的な方法
中央寄せの具体的な手法とその応用
HTMLで要素を中央寄せにする実例

この記事では、HTMLで要素を中央寄せにする基本的な方法から、さまざまなオプションを駆使した応用例まで、詳しく解説します。

ぜひ最後までご覧ください。

筆者プロフィール

【現職】プロダクトマネージャー

【副業】ブログ（月間20万PV）/YouTube/Web・アプリ制作

「プログラミング × ライティング × 営業」の経験を活かし、30後半からのIT系職へシフト。現在はプロダクトマネージャーとして、さまざまな関係者の間に入り奮闘してます。当サイトでは、実際に手を動かせるWebアプリの開発を通じて、プログラミングはもちろん、IT職に必要な情報を提供していきます。

【当ブログで紹介しているサイト】

当サイトチュートリアルで作成したデモ版日報アプリ

Django × Reactで開発したツール系Webアプリ

✔人に見せても恥ずかしくないコードを書こう

「リーダブルコード」は、わかりやすく良いコードの定義を教えてくれる本です。

見るからにきれいなコードの書き方
コードの分割方法
変数や関数の命名規則

エンジニアのスタンダートとすべき基準を一から解説しています。

何回も読むのに値する本なので、ぜひ手にとって読んでみてください。

リーダブルコード ―より良いコードを書くためのシンプルで実践的なテクニック

created by Rinker

¥2,640 (2024/12/03 13:55:30時点 Amazon調べ-詳細)

HTMLでの中央寄せの基本

こちらでは、HTMLにおける「中央寄せ」の基本についてお伝えしていきます。

「中央寄せ」の基本を理解することで、ウェブページの見栄えを良くし、情報を効果的に伝えられます。

中央寄せの意味と重要性
文字、要素、画像、表、リストを中央寄せする基本的な方法

中央寄せの意味と重要性

「中央寄せ」とは、文字や要素をウェブページの中心に配置するデザイン手法のことを指します。

ウェブページを見る際、人の目は自然と中央に引き寄せられる傾向があるのです。

重要な情報や視覚的な要素を中央寄せにすることで、情報伝達がスムーズに進みます。

文字、要素、画像、表、リストを中央寄せする基本的な方法

中央寄せはHTML要素の種類に関係なく適用できます。

テキスト：「text-align: center」のスタイルを使用
画像や他のブロック要素：「margin: auto」を使用

また、テーブルやリストも同様にCSSを用いて中央寄せすることが可能です。

テキストの中央寄せ

このセクションでは、HTMLでテキストを中央寄せにする方法について詳しく解説します。

text-align属性を用いた中央寄せ
画像のテキスト対齐と中央寄せ
テキスト中央寄せの具体的な例

text-align属性を用いた中央寄せ

テキストの中央寄せは、「text-align: center」を使用しておこないます。

これをCSSスタイルとしてpタグやh1〜h6タグなどのテキストを含む要素に適用することで、テキストを容易に中央寄せにできます。

<!DOCTYPE html>
<html>
<head>
  <style>
    .center {
      text-align: center;
    }
  </style>
</head>
<body>

  <p class="center">このテキストは中央寄せです。</p>

</body>
</html>

画像のテキストを中央寄せ

画像内のテキストもまた、「text-align: center」を使用して中央寄せできます。

これは画像がブロック要素として配置され、その内部にテキストが含まれている場合に特に有用です。

<!DOCTYPE html>
<html>
<head>
  <style>
    .center-text {
      text-align: center;
    }
  </style>
</head>
<body>

  <div class="center-text">
    <img src="image.jpg" alt="image">
    <p>このテキストは画像の下に中央寄せです。</p>
  </div>

</body>
</html>

テキスト中央寄せの具体的な例

実際の例を見てみましょう。例えば、以下のHTMLを考えます。

<div>
    <p>This is a paragraph that we want to center.</p>
</div>

この段落を中央寄せにするには、インラインスタイルでは以下のようになります。

<div style="text-align: center;">
    <p>This is a paragraph that we want to center.</p>
</div>

これにより、テキストは中央寄せになります。

ブロック要素の中央寄せ

ここでは、ブロック要素の中央寄せについて詳しく説明します。

ブロック要素を適切に配置することは、ウェブページのデザインにおいて重要です。

margin:autoを用いたブロック要素の中央寄せ
divタグを利用した中央寄せ
ブロック要素中央寄せの具体的な例

margin:autoを用いたブロック要素の中央寄せ

ブロック要素を中央寄せにする基本的な方法のひとつは、「margin: auto」を使用すること。

この方法は、要素の左右のマージンを自動的に等しくすることで、要素を中央に配置します。

ただし、これを機能させるためには、要素に固定の幅（width）が設定されている必要があります。

<!DOCTYPE html>
<html>
<head>
  <style>
    .center-block {
      width: 50%;   /* ここで要素の幅を指定します */
      margin: auto; /* 左右のマージンを自動的に等しくします */
    }
  </style>
</head>
<body>

  <div class="center-block">
    <p>このテキストは中央に配置されたブロック要素の中にあります。</p>
  </div>

</body>
</html>

divタグを利用した中央寄せ

divタグは、HTMLのブロック要素で、一般的にデザインやレイアウトを適用するために使用されます。

div要素を中央寄せにするには、「margin: auto」を適用し、固定の幅を設定。

<!DOCTYPE html>
<html>
<head>
  <style>
    .center-div {
      width: 80%;   /* 固定の幅を設定します */
      margin: auto; /* 左右のマージンを自動的に等しくします */
    }
  </style>
</head>
<body>

  <div class="center-div">
    <p>このテキストは中央に配置されたdiv要素の中にあります。</p>
  </div>

</body>
</html>

ブロック要素中央寄せの具体的な例

具体的な例を挙げてみましょう。

次のHTMLで定義されたdiv要素を考えます。

<div>
    This is a block element that we want to center.
</div>

このdiv要素を中央寄せにするには、インラインスタイルで次のよう書きます。

<div style="margin: auto; width: 50%;">
    This is a block element that we want to center.
</div>

画像の中央寄せ

このセクションでは、HTMLで画像を中央寄せにする方法について詳しく解説します。

画像の水平方向への中央寄せ
画像の垂直方向への中央寄せ

画像の水平方向への中央寄せ

HTMLで指定した画像を水平方向に中央寄せするためには、その画像を囲むブロックレベルのコンテナに対して「text-align: center」を指定します。

また、「margin: auto」を使用する場合、画像要素に「display: block」を指定する必要があります。

<!DOCTYPE html>
<html>
<head>
  <style>
    .center-image {
      display: block;
      margin: auto;
    }

    .center-text {
      text-align: center;
    }
  </style>
</head>
<body>

  <div class="center-text">
    <img class="center-image" src="image.jpg" alt="Centered Image">
  </div>

</body>
</html>

画像の垂直方向への中央寄せ

画像の垂直方向への中央寄せは少しトリッキーです。

一つの方法として、親要素に対して「display: flex」および「align-items: center」を使用する方法があります。

<!DOCTYPE html>
<html>
<head>
  <style>
    .center-vertical {
      display: flex;
      align-items: center;
      height: 300px;  /* 必要に応じて高さを調節 */
      border: 1px solid black;  /* 視覚化のためのボーダー */
    }
  </style>
</head>
<body>

  <div class="center-vertical">
    <img src="image.jpg" alt="Centered Image">
  </div>

</body>
</html>

テーブルの中央寄せ

ここでは、HTMLとCSSを使用してテーブルを中央寄せにする方法を詳しく解説します。

HTMLのalign属性での中央寄せ
CSSを用いたテーブルの中央寄せ

HTMLのalign属性での中央寄せ

HTML4までは、「align」属性を使用してテーブルを中央寄せにすることができました。

たとえば、「<table align=”center”>」というように使用されます。

しかし、HTML5ではこの属性は非推奨となり、次のCSSによる方法がおすすめです。

CSSを用いたテーブルの中央寄せ

現代的な方法としては、CSSを使用したテーブルの中央寄せが推奨されています。

テーブルに「margin: auto」を適用することで、テーブルはその親要素の中央に配置されます。

<!DOCTYPE html>
<html>
<head>
  <style>
    .center-table {
      margin: auto;
    }
  </style>
</head>
<body>

  <table class="center-table" border="1">
    <tr>
      <th>Firstname</th>
      <th>Lastname</th>
    </tr>
    <tr>
      <td>John</td>
      <td>Doe</td>
    </tr>
    <tr>
      <td>Jane</td>
      <td>Doe</td>
    </tr>
  </table>

</body>
</html>

リストの中央寄せ

順序付きリスト（ol）や順序なしリスト（ul）を中央寄せにするには、リスト自体をブロック要素として扱い、その左右のマージンを自動に設定します。

具体的には、「<ul style=”margin: auto; width: 50%;”>」というようにスタイルを設定することでリストを中央寄せにできます。

具体的な例として、以下のリストを考えましょう。

<ul>
    <li>Item 1</li>
    <li>Item 2</li>
    <li>Item 3</li>
</ul>

このリストを中央寄せにするには、次のようにCSSを追加します。

<ul style="margin: auto; width: 50%;">
    <li>Item 1</li>
    <li>Item 2</li>
    <li>Item 3</li>
</ul>

これにより、リストはページの中央に配置されます。

高度な中央寄せの手法

このセクションでは、より高度な中央寄せの手法を解説します。

これらの方法は、特定の条件下で特に有効な手段となります。

transformを用いた中央寄せ
Flexboxを用いた中央寄せ
CSS Gridを用いた中央寄せ

transformを用いた中央寄せ

CSSの「transform」プロパティを用いて要素を中央寄せすることも可能です。

この方法は特に要素のサイズが動的な場合に有効で、要素の位置をその自身のサイズに基づいて調整します。

「transform: translate(-50%, -50%)」は要素を左上から見て左に50%、上に50%移動させます。

これを利用すると、要素が親要素の中心を基準に移動します。

例はこちらです。

<!DOCTYPE html>
<html>
<head>
    <style>
        .parent {
            position: relative;
            height: 200px;
            width: 200px;
            background-color: #f8f9fa;
        }

        .centered {
            position: absolute;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
            background-color: #6c757d;
            color: white;
            padding: 10px;
        }
    </style>
</head>
<body>

<div class="parent">
    <div class="centered">I am centered</div>
</div>

</body>
</html>

Flexboxを用いた中央寄せ

CSS3から導入されたFlexboxは、要素の配置、方向、順序、サイズ等を容易に制御できる強力なツールです。

Flexboxを使った中央寄せは、「display: flex」を親要素に設定し、その後「justify-content: center」(水平方向) と「align-items: center」(垂直方向) を設定します。

これらのプロパティは、フレックスアイテムを親要素の中心に配置します。

<!DOCTYPE html>
<html>
<head>
    <style>
        .flex-container {
            display: flex;
            height: 200px;
            justify-content: center;
            align-items: center;
            background-color: #f8f9fa;
        }

        .centered {
            background-color: #6c757d;
            color: white;
            padding: 10px;
        }
    </style>
</head>
<body>

<div class="flex-container">
    <div class="centered">I am centered</div>
</div>

</body>
</html>

CSS Gridを用いた中央寄せ

CSS Gridもまた要素の配置を制御する強力なツールで、Flexboxと同様に要素を簡単に中央寄せにできます。

親要素に「display: grid」を設定し、「justify-content: center」(水平方向)と「align-items: center」(垂直方向)を設定します。

これらのプロパティは、グリッドアイテムを親要素の中心に配置します。

<!DOCTYPE html>
<html>
<head>
    <style>
        .grid-container {
            display: grid;
            height: 200px;
            justify-content: center;
            align-items: center;
            background-color: #f8f9fa;
        }

        .centered {
            background-color: #6c757d;
            color: white;
            padding: 10px;
        }
    </style>
</head>
<body>

<div class="grid-container">
    <div class="centered">I am centered</div>
</div>

</body>
</html>